0

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

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 throws errors at all // comments, even with the silent option set to true.

Here's my gulp task:

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

});

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

HOW I SOLVED IT:

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'));

});
claireablani
  • 7,804
  • 5
  • 16
  • 19

1 Answers1

0

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.

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.

davidtheclark
  • 4,666
  • 6
  • 32
  • 42