Gulp 任务：管道 gulp-sass 到 postCSS 什么都不做

Question

我正在尝试：

将供应商前缀添加到 SCSS
编译为CSS
缩小它

使用此 gulp 代码：

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')
const postcssScss = require('postcss-scss') 

function genCSS() {
  return src(tpath.src.scss)
    .pipe(sourcemaps.init()) //line in css, maps to source (file & line).
    .pipe(postcss({plugins:[autoprefixer()], syntax:require('postcss-scss')}))
    .pipe(sass.sync({outputStyle:'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(dest(tpath.dest.scss)) //single index.css file
};

exports.genCSS=genCSS

但这就是 postCSS 记录的内容，确实如此：

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

在链接页面：https://www.postcss.parts/，有 Sass 个插件，但这不是编译器，所以我很困惑。

错误是什么，如何解决？

Answer 1

这个

  .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

应该是：

    .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

一些细节：

如果存在配置文件，请从 postcss({...})
在函数参数上没有postcss-scss它运行得更快（但它必须被导入），像这样：

const postcssScss = require('postcss-scss') //keep this

.pipe(postcss([autoprefixer()])) //removed here

您可以添加 cssnano 并删除 outputStyle:compressed 但这会更慢（加载额外的包）。

Gulp 任务：管道 gulp-sass 到 postCSS 什么都不做

Gulp task: pipe gulp-sass to postCSS doing nothing

sass

gulp

postcss