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

Question

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

我使用的是Webstorm IDE，它会在.scss文件中自动使用javascript风格的注释（//），所以我的非块注释都是//注释，而不是/* */.

postcss-simple-vars 会抛出所有 // 注释的错误，即使将 silent 选项设置为 true。

这是我的 gulp 任务：

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，而 // 注释不是标准的：它们破坏了解析器。

要运行未编译的SCSS通过postcss带有//注释，你应该使用备用解析器postcss-scss. The documentation in that README and for gulp-postcss应该解释如何使用它。

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

gulp postcss-simple-vars throws error at // comments

gulp

postcss