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-sass 2.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中输出不正确的来源

1 个答案: