Question

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

我为一个人写了一些SCSS（使用了webpack），然后将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自述文件中，我看到粗体语句＆＃34;此模块不编译SCSS＆＃34;，但现在我的问题是：＆＃34;哪个模块可以做什么？＆＃34; < /强>

Answer 1

有一个gulp任务gulp-sass，它会将你的scss编译成CSS，然后你可以将它传递给post-css。我经常使用Autoprefixer这样做。

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

1 个答案: