gulp postcss-simple-vars在//注释处引发错误 [英] gulp postcss-simple-vars throws error at // comments

问题描述

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

I'm attempting to migrate from Sass to postCSS and testing out postcss-simple-vars gulp plugin.

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

I'm using Webstorm IDE, which automatically uses javascript style comments (//) in .scss files, so my non-block comments are all // comments, not /* */.

postcss-simple-vars会在所有//注释上引发错误，即使将silent选项设置为true.

postcss-simple-vars throws errors at all // comments, even with the silent option set to 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忽略//样式注释?

Am I missing something really obvious? Is there some way to get postcss-simple-vars to ignore // style comments?

我如何解决它:

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

I replaced all the // comments with /* */ comments with 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'));

});

推荐答案

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

The problem is not in postcss-simple-vars. It's that the default parser for postcss expects standard CSS, and // comments are not standard: they break the parser.

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

To run uncompiled SCSS with // comments through postcss, you should use the alternate parser postcss-scss. The documentation in that README and for gulp-postcss should explain how to use it.

这篇关于gulp postcss-simple-vars在//注释处引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！