Gulp-生成的源映射在 Chrome 中不起作用

Question

除了在 Chrome 中启用 source maps 之外，在我的 gulpfile.js 中，我在基于 this answer 调用 sass 时使用 errLogToConsole: true, sourceComments: 'map', sourceMap: '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 中，如下面的屏幕截图所示

Answer 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 函数中指定一个文件，以更改此行为。

Gulp-生成的源映射在 Chrome 中不起作用

Gulp-generated source maps don't work in Chrome

google-chrome

sass

source-maps

gulp