Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

sass - Gulp-generated source maps don't work in Chrome

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

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...