Gulp生成的源地图在Chrome中不起作用 [英] Gulp-generated source maps don't work in Chrome

问题描述

除了在Chrome中启用源地图之外，在我的gulpfile.js中，我使用 errLogToConsole：true，sourceComments：'map'，sourceMap：' sass'作为根据

解决方案

我不太确定哪个版本的 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（）。在（'ERR或'，sass.logError））
 .pipe（sourcemaps.write（））
 .pipe（autoprefixer（））
 .pipe（gulp.dest（'../ dist / styles '））
.pipe（browserSync.reload（{
 stream：true 
}））
}）
  

默认情况下，它会将您的源映射内联到输出文件，但您可以在 sourcemaps.write 函数，来改变这种行为。

Apart from enabling source maps in Chrome, in my gulpfile.js I use errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass' as arguments when calling sass based on this answer:

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
  }))
});

Yet SCSS content still doesn't show up in DevTools. Why?

Note: source map comments do show up in compiled CSS as shown in screenshot below

解决方案

I'm not really sure which version of gulp-sass you're using that was allowing you to pass these sourceMaps options, but using the latest version, they leverage gulp-sourcemaps instead, allowing you to do something like this:

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
    }))
})

By default it will inline your sourcemaps to the output file, but you can specify a file in the sourcemaps.write function, to change this behavior.

这篇关于Gulp生成的源地图在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！