gulp - gulp postcss-simple-vars 在 // 注释处抛出错误

Question

我正在尝试从 Sass 迁移到 postCSS 并测试 postcss-simple-vars gulp 插件。

我正在使用 Webstorm IDE，它会在 .scss 文件中自动使用 javascript 样式的注释 (//)，所以我的非块注释都是 // 注释，而不是 /* */。

postcss-simple-vars 会在所有注释中抛出错误 // 即使将静默选项设置为 true。

这是我的吞咽任务：

gulp.task('postcss', function () {
    return gulp
        .src('./styles/sass2/*.scss')
        .pipe($.postcss(
            [
                vars({
                    silent: true,
                    variables: colors
                })
            ]))
        .pipe(gulp.dest('./dest'));

});

我错过了一些非常明显的东西吗？有没有办法让 postcss-simple-vars 忽略 // 样式注释？

我是如何解决的：

我用 gulp-replace ($.replace) 替换了所有 // 注释为 /* */ 注释。

gulp.task('replace-comments', function() {
    return gulp
        .src(config.scss)
        .pipe($.replace(/\/\/.*/g, function(comment){

            return '/*' + comment.substring(2) + ( '*/');
        }))
        .pipe(gulp.dest('./styles/sass3'));

});

Answer 1

问题不在 postcss-simple-vars 中。这是 postcss 的默认解析器需要标准的 CSS，而//注释不是标准的：它们会破坏解析器。

要通过 postcss 运行带有注释的未编译 SCSS //，您应该使用备用解析器postcss-scss。该 README 和gulp-postcss中的文档应该解释如何使用它。