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

【问题标题】：Gulp task: pipe gulp-sass to postCSS doing nothingGulp 任务：管道 gulp-sass 到 postCSS 什么都不做
【发布时间】：2021-09-19 15:36:48
【问题描述】：

我正在尝试：

向 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 记录的内容，确实是这样：

您没有设置任何插件、解析器或字符串化程序。现在，PostCSS 什么都不做。在https://www.postcss.parts/ 上为您的案例选择插件并在 postcss.config.js 中使用它们。

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

什么是错误以及如何解决？

【问题讨论】：

标签： sass gulp postcss

【解决方案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，但这会更慢（加载额外的包）。

【讨论】：