gulp postcss-simple-vars在//注释处引发错误

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

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

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

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

这是我的大任务：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7
8
9
10

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

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