如何在 gulp 中使用 PostCSS 编译 SCSS？答案

【问题标题】：How to compile SCSS with PostCSS in gulp?如何在 gulp 中使用 PostCSS 编译 SCSS？
【发布时间】：2017-10-09 05:13:00
【问题描述】：

我有两个遗留项目，它们共享许多通用功能，所以我试图让它们干燥并将代码移动到单独的包中。

我为一个（使用 webpack）编写了一些 SCSS，然后将那个 css 包含在另一个中，然后得到了

[13:18:52] postcss-partial-import: /home/bunyk/../node_modules/FEGeneric/src/user/auth.scss:26:26: Unknown word

  24 |             background-color: #CC4815;
  25 |             img {
> 26 |                 width: #{$panel-width / 2};
     |                          ^
  27 |                 display: block;
  28 |                 height: 550px;

已通过添加解决此问题

import scss_syntax from 'postcss-scss';

进入我的 gulp 任务，目前看起来像这样：

gulp.task('styles:debug', cb =>
        gulp.src('app/styles/application.scss')
            .pipe(rename({extname: '.css'}))
            .pipe(sourcemap.init())
            .pipe(postcss([
                require('postcss-partial-import')({extension: 'scss'}),
                require('postcss-nested'),
                require('postcss-sassy-mixins'),
                require('postcss-inline-comment'),
                require('postcss-simple-vars'),
                require('postcss-conditionals'),
                autoprefixer({browsers: ['last 2 versions']})
            ], {
                syntax: scss_syntax // <--- this was added
            }))
            .on('error', e => {
                gutil.log(e.message);
                cb();
            })
            .pipe(sourcemap.write('.'))
            .pipe(gulp.dest('dist/'))
);

现在项目编译成功，但在浏览器中我看到原始 SCSS：

在 postcss-scss 自述文件中，我看到粗体声明“此模块不编译 SCSS”，但现在我的问题是：“哪个模块可以编译？”

【问题讨论】：

标签： sass gulp postcss

【解决方案1】：

有一个 gulp 任务，gulp-sass，它将把你的 scss 编译成 CSS，然后你可以将它通过管道传输到 post-css。我经常用 Autoprefixer 来做这件事。

【讨论】：

看起来我被 gulp-scss 模块误导了，它需要安装 scss（为了简单起见，我希望所有东西都由 npm 安装。无论如何，即使 gulp-sass 也没有帮助，因为无论在管道中的 postcss 之前还是之后，它都会给我语法错误。:(
我个人不知道不需要在其他地方安装 sass 的任务运行器的 sass 模块。看起来您可以使用 npm 安装 node-sass 并使 gulp-scss 工作，同时在 npm 中维护所有包管理。