我无法 gulp 生成 scouce 地图

Question

我正在尝试运行一个简单的 Gulp 任务来输出 css 并创建源映射。到 css 的转换工作正常，但是当我打开开发人员控制台时，css 仍然显示为来自 style.css 而不是我想要的 .scss 文件预计。我检查了浏览器设置中的 'Enable CSS Source Maps'。这是我的代码：

// compile all sass files to css
gulp.task('sass', function(done){
  return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
    .pipe(sourcemaps.init()) // create sourcemaps 
    .pipe(sourcemaps.write())  
    .pipe(gulp.dest('app/css'))  // save to the 'app' directory
    done();
});

非常感谢任何帮助。

Answer 1

在编译 sass:

之前，您必须启动 sourcemap

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss') 
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sourcemaps.write())  
    .pipe(gulp.dest('app/css'));
});

请注意，使用 Gulp 4，您不再需要 gulp-sourcemaps 包，而是可以执行以下操作：

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss', {sourcemaps: true}) 
    .pipe(sass({outputStyle: 'expanded'})) 
    .pipe(gulp.dest('app/css', {sourcemaps: true}));
});

我无法 gulp 生成 scouce 地图

I can't get gulp to produce a scouce map

gulp

gulp-sourcemaps