gulp-sourcemaps 在 .css.map 中输出不正确的来源

Question

我似乎无法弄清楚我的 gulp 和 gulp-sourcemaps 配置有什么问题。我的 main.css 和 main.css.map 已编译，但我得到的来源不正确：

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css" [...] etc

它从不显示 main.css 以外的任何来源。当我通过浏览器检查并单击源代码时，它会显示 SCSS 中最后导入的文件。

这是我的 Gulp 任务：

gulp.task('sass', function () {
    return gulp.src(config.sass.src)
        .pipe(sourcemaps.init({largeFile: true}))
        .pipe(sass().on('error', sass.logError ))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(config.sass.dest));
});

我的config.sass.src是assets/sass/**/*.{sass,scss}

我也有一些 autoprefixer 管道和 cssnano 但我已经注释掉了所有额外的东西并尝试运行那些，唉，同样的东西。

这是我的 SCSS 的一个最小示例：

main.scss:

@import "components/buttons";

components/_buttons.scss:

button {
    padding: 10px;
    background: black;
    color: white;
    border: 0;
    border-radius: 0;
}

这会在 css.map 中输出以下内容：

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css"],"sourcesContent":["@import \"components/buttons\";","button {\n    padding: 10px;\n    background: black;\n    color: white;\n    border: 0;\n    border-radius: 0;\n}"],"mappings":"ACAA,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,IAAK;EACd,UAAU,EAAE,KAAM;EAClB,KAAK,EAAE,KAAM;EACb,MAAM,EAAE,CAAE;EACV,aAAa,EAAE,CAAE,GACpB","names":[]}

使用：

gulp 3.9.1
gulp-sass2.3.2
gulp-sourcemaps 1.10.0

Answer 1

您使用的 gulp-sourcemaps 版本是 a bug。

从 1.10.0 更新到 1.10.1 应该可以解决问题：

npm install --save-dev gulp-sourcemaps

gulp-sourcemaps 在 .css.map 中输出不正确的来源

gulp-sourcemaps outputs incorrect sources in .css.map

gulp

gulp-sass

gulp-sourcemaps