Gulp libsass/autoprefixer error on comments in sass file

Question

Я перехожу от gulp-ruby-sass к gulp-sass. Gulp ruby ​​sass работал без ошибок, но чтобы облегчить жизнь нашим разработчикам Windows, я пытаюсь удалить зависимость от Ruby.

Я установил пакеты в настроил свой файл глоток, как так:

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-файл. Обратите внимание, что даже если я удалю этот блок, просто попробуйте ошибки в следующем комментарии.

Если я прокомментирую трубку, то она работает. Так в чем проблема?

FWIW, я следил за рекомендациями от this site.

Answer 1

Нет комментариев Javascript-style однострочный // комментарии в CSS, 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))