如何使用Gulp提取独立的CSS Sourcemap文件？

首先纠正你管道顺序的错误：你当前是先编译Sass再初始化sourcemap，这会导致sourcemap无法捕获各原SCSS文件的关联信息，正确的顺序应该是先初始化sourcemap，再编译Sass。

不需要生成独立的Sourcemap文件——因为Sass编译@import的文件后会输出单个CSS文件，对应的Sourcemap会包含所有原SCSS文件的映射关系，Chrome DevTools会自动识别每个CSS规则所属的原文件（包括多层嵌套@import的文件）。

正确的Gulp配置示例 #

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

gulp.task('compile-sass', function() {
  return gulp.src('./src/scss/parent.scss')
    // 第一步：初始化sourcemap，准备捕获编译过程的源信息
    .pipe(sourcemaps.init())
    // 编译Sass，保留错误提示
    .pipe(sass.sync().on('error', sass.logError))
    // 输出sourcemap到指定目录（和CSS文件同层级的maps文件夹）
    .pipe(sourcemaps.write('./maps'))
    // 输出编译后的CSS
    .pipe(gulp.dest('./dist/css'));
});

效果说明 #

编译完成后，你会在./dist/css/maps下得到parent.css.map文件，打开Chrome开发者工具查看CSS规则时，右侧会显示该规则对应的原SCSS文件路径（比如child.scss或更深层级的导入文件），点击即可直接跳转到对应的原文件。

关于MiniCssExtractPlugin #

这个是Webpack的插件，Gulp生态里不需要用它——Gulp通过gulp-sass配合gulp-sourcemaps就可以完成上述需求，无需额外集成Webpack的插件。

内容的提问来源于stack exchange，提问作者Vaidotas