咕嘟咕嘟生成的源映射不會在Chrome

Question

除了在Chrome中實現source maps工作，在我gulpfile.js調用sass當我使用errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass'作爲參數，基於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 
    })) 
}); 

然而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到OUTP ut文件，但您可以在sourcemaps.write函數中指定一個文件來更改此行爲。