在sass文件中的注释上gulp libsass / autoprefixer错误

时间:2016-06-17 12:29:22

标签: sass gulp gulp-sass autoprefixer gulp-autoprefixer

我正在从gulp-ruby-sass切换到gulp-sass。 Gulp ruby​​ sass工作没有错误,但为了让我们的Windows开发人员轻松生活,我试图消除对Ruby的依赖。

我在设置我的gulp文件时安装了软件包,如下所示:

    var sassFiles = './app/assets/sass/**/*.{scss,sass}';
    var cssFiles = './app/assets/css';
    var sassOptions = {
      errLogToConsole: true,
      outputStyle: 'compact'
    };
    var autoprefixerOptions = {
      browsers: ['last 2 versions']
    };


  gulp.task('sass', function () {
     return gulp
    .src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(cssFiles))
    .pipe(browserSync.stream());
});

除非我的文件中的评论每次都失败:

[08:20:39] Starting 'sass'...

events.js:154
  throw er; // Unhandled 'error' event
  ^
 CssSyntaxError: /Users/stevelombardi/github/designsystem-  3/app/assets/sass/design_system.scss:1:1: Unknown word
 ////
 ^
/// This is a poster comment.

映射到scss文件中的注释。请注意,即使我删除了此块,也只是在下一条注释中出现错误。

如果我注释掉autoprefixer管道,那么。那么这里的问题是什么?

FWIW,我遵循this site的指导原则。

1 个答案:

答案 0 :(得分:4)

CSS中没有Javascript风格的单行//条评论,only multi-line /* */ comments。 SASS / SCSS支持单行//条评论,但stripped from the resulting CSS

由于autoprefixer仅对CSS而不是SASS / SCSS运行,因此您需要在sass()之前运行autoprefixer()

.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))