bản đồ nguồn Gulp tạo không có tác dụng trong Chrome

Question

Ngoài khả năng source maps trong Chrome, trong gulpfile.js của tôi, tôi sử dụng errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass' như các đối số khi gọi sass dựa trên 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 
    })) 
}); 

Tuy SCSS nội dung vẫn doesn không hiển thị trong DevTools. Tại sao?

Lưu ý: bình luận bản đồ nguồn nào hiển thị trong CSS biên soạn như thể hiện trong hình dưới đây

Answer 1

Tôi không thực sự chắc chắn phiên bản của gulp-sass bạn đang sử dụng đã được cho phép bạn vượt qua những sourceMaps tùy chọn, nhưng sử dụng phiên bản mới nhất, họ đòn bẩy gulp-sourcemaps thay vào đó, cho phép bạn làm điều gì đó như thế này:

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

Theo mặc định nó sẽ inline sourcemaps của bạn vào outp ut tệp, nhưng bạn có thể chỉ định một tệp trong hàm sourcemaps.write, để thay đổi hành vi này.