Gulp使用postcss处理SCSS时提示未设置插件无操作如何解决？

存在的错误 #

• gulp-postcss传参格式错误：你向postcss()传入的是一个同时包含plugins和syntax字段的对象，但gulp-postcss的要求是第一个参数为插件数组，第二个参数才是解析配置项（比如syntax、parser等），格式不匹配导致PostCSS无法识别到你传入的autoprefixer插件，因此抛出未设置插件的提示。
• 处理流程顺序错误：你当前的逻辑是先执行PostCSS加前缀，再编译SCSS，这不符合工具的使用逻辑。autoprefixer仅能识别标准CSS语法，无法直接作用于未编译的SCSS源码，即使参数传对也无法达到加前缀的预期效果。

修复方法 #

1. 调整处理顺序：先编译SCSS为标准CSS，再调用PostCSS执行autoprefixer加前缀
2. 修正gulp-postcss的传参格式，插件数组作为第一个参数传入
3. 移除不必要的postcss-scss依赖，编译完成的CSS不需要SCSS语法解析器处理

修复后的完整代码如下：

const {src,dest} = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('autoprefixer');
const sourcemaps= require('gulp-sourcemaps');
const postcss = require('gulp-postcss');

// 注意提前定义好tpath的src和dest路径，此处保留你的原有路径配置即可
function genCSS() {
  return src(tpath.src.scss)
    .pipe(sourcemaps.init())
    // 先编译SCSS为压缩后的CSS，压缩逻辑直接通过sass的outputStyle配置实现
    .pipe(sass.sync({outputStyle:'compressed'}).on('error', sass.logError))
    // 再给编译完成的CSS加厂商前缀，插件数组作为postcss的第一个参数传入
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write())
    .pipe(dest(tpath.dest.scss))
};

exports.genCSS=genCSS

内容的提问来源于stack exchange，提问作者user12582392