我无法大口大口地制作一张 scouce 地图

Question

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

// 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 之前，您必须启动源映射：

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