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）将所有//注释替换为/ * * / comments。

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和for gulp-postcss中的文档应说明如何使用它。

gulp postcss-simple-vars在//评论时抛出错误

1 个答案: