Gulp-generated source maps don't work in Chrome
google-chrome, gulp, sass, source-maps
Solution
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.
Problem
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