如何用PostCSS在gulp中编译SCSS？

Question

我有两个共享公共功能的遗留项目，所以我试图让它们干涸，并将代码转移到单独的包中。

我为其中一个(使用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"，但现在我的问题是：”哪个模块做？“。

Answer 1

有一个gulp任务，吞咽，它将编译你的scss到CSS，然后你可以将它输送到后css中。我经常用自动修复器做这件事。