【发布时间】：2017-01-11 16:52:12
【问题描述】：
我似乎无法弄清楚我的 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":[]}
使用：
- 吞咽 3.9.1
- gulp-sass 2.3.2
- gulp-sourcemaps 1.10.0
【问题讨论】：
-
您的任务没有明显问题。您必须提供一个最小的 SASS/SCSS 文件来重现问题，以便有机会解决这个问题。
-
@SvenSchoenung 完成！我还添加了我的
config.sass.src是什么，我认为问题可能是我使用每个 scss/sass 文件作为源，所以我将其更改为main.scss的路径并且确实构建了 css，但源映射是完全一样。
标签： gulp gulp-sass gulp-sourcemaps