Gulp -генерированные исходные карты не работают в Chrome

Помимо включения source maps в Chrome, в моем gulpfile.js я использую errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass' в качестве аргументов при вызове sass на основе этого ответа:

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(plumber({ errorHandler: onError }))
  .pipe(sass({errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass'}))
  .pipe(autoprefixer())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

Тем не менее контент SCSS по-прежнему не отображается в DevTools. Почему?

Примечание: комментарии исходной карты отображаются в скомпилированном CSS, как показано на скриншоте ниже

введите описание изображения здесь

Ответы

Ответ 1

Я не уверен, какая версия gulp-sass вы используете, что позволяет вам передавать эти параметры sourceMaps, но используя последнюю версию, они используют gulp-sourcemaps, позволяя вам сделать что-то вроде этого:

const sourcemaps = require('gulp-sourcemaps')

gulp.task('sass', function () {
  return gulp.src('../assets/styles/**/*.scss')
    .pipe(plumber({ errorHandler: onError }))
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest('../dist/styles'))
    .pipe(browserSync.reload({
      stream: true
    }))
})

По умолчанию он будет привязать исходные файлы к выходному файлу, но вы можете указать файл в функции sourcemaps.write, чтобы изменить это поведение.