Google chrome Gulp生成的源地图不'；我不能在铬上工作

除了在Chrome中启用

源映射

之外，在my gulpfile.js中，我使用

errLogToConsole:true，sourceComments:'map'，sourceMap:'sass'

作为参数调用

sass

时基于：

然而，

SCSS

内容仍然没有显示在DevTools中。为什么?

注意：如下面的屏幕截图所示，源地图注释确实显示在已编译的CSS中

---

我不确定您使用的是哪个版本的

gulp sass

允许您传递这些sourceMaps选项，但使用最新版本，它们可以发挥作用，允许您执行以下操作：

const sourcemaps=require（'gulp-sourcemaps'）
吞咽任务（'sass'，函数（）{
return gulp.src（“../assets/styles/***.scss”）
.管道（管道工（{errorHandler:onError}））
.pipe（sourcemaps.init（））
.pipe（sass（）.on（'error'，sass.logError））
.pipe（sourcemaps.write（））
.pipe（autoprefixer（））
.pipe（大口目的（'../dist/styles'））
.pipe（browserSync.reload({
溪流：对
}))
})

默认情况下，它会将您的sourcemaps内联到输出文件中，但您可以在

sourcemaps.write

函数中指定一个文件来更改此行为。

是否添加了

gulp.task（'default'、['scripts'、'sass'）到Gulp的默认任务？
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
  }))
});