google-chrome - Gulp生成的源 map 在Chrome中不起作用

除了在Chrome中启用source maps之外，在我的gulpfile.js中，当基于this answer调用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中显示。为什么？

注意:源 map 注释确实会显示在已编译的CSS中，如下面的屏幕快照所示

最佳答案

我不太确定您使用的是哪个版本的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函数中指定一个文件来更改此行为。