sass 文件中的注释 Gulp libsass/autoprefixer 错误答案

【问题标题】：Gulp libsass/autoprefixer error on comments in sass filesass 文件中的注释 Gulp libsass/autoprefixer 错误
【发布时间】：2016-06-17 12:29:21
【问题描述】：

我正在从 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());
});

除非每次在我的文件中的 cmets 上都会失败：

[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 文件中的注释。请注意，即使我删除了此块，sass 也会在下一条评论中出错。

如果我注释掉自动前缀管道，它可以工作。那么这里有什么问题呢？

FWIW，我遵循 this site 的指导方针。

【问题讨论】：

标签： sass gulp gulp-sass autoprefixer gulp-autoprefixer

【解决方案1】：

CSS 中没有 Javascript 样式的单行 // cmets，only multi-line /* */ comments。 SASS/SCSS 支持单行// cmets，但stripped from the resulting CSS。

由于autoprefixer 仅对 CSS 而非 SASS/SCSS 运行，因此您需要在 autoprefixer() 之前运行 sass()：

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

【讨论】：