【发布时间】：2016-03-08 13:48:08
【问题描述】：
我有一个名为 style.scss 的 scss 源文件，它位于 /style 中：
@import 'reset';
body {
background: #555555;
color: white;
}
还有另一个名为reset.scss 的scss 源文件位于/style 中：
* {
padding: 0;
margin: 0;
}
这些由 sass 编译，并带有一个源映射到位于 /style 中的 style.min.css：
*{padding:0;margin:0}body{background:#555555;color:white}
/*# sourceMappingURL=style.min.css.map */
这是生成的地图文件style.min.css.map，位于/style：
{"version":3,"sources":["reset.scss","style.scss"],"names":[],"mappings":"AAAA,CAAC,AAAC,CACA,OAAO,CAAE,CAAE,CACX,MAAM,CAAE,CAAE,CCAZ,ADCC,ICDG,AAAC,CACH,UAAU,CAAE,OAAQ,CACpB,KAAK,CAAE,KAAM,CACd","file":"style.min.css","sourcesContent":["* {\r\n padding: 0;\r\n margin: 0;\r\n}","@import 'reset';\r\n\r\nbody {\r\n background: #555555;\r\n color: white;\r\n}\r\n"],"sourceRoot":"/style"}
我正在使用 gulp 来调用 sass。以下是相关配置：
var gulp = require('gulp');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
gulp.task('css', function() {
return gulp.src('style/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('.', {addComment: true, sourceRoot: '/style'}))
.pipe(gulp.dest('style/'))
});
WebStorm 11.0.1 似乎完美地理解了这一点。
Chrome DevTools 无法正确理解映射。 显然是在尝试；但所有映射都指向不同位置的reset.scss，而不是正确的文件和位置。如果我通过将@import 替换为reset.scss 的实际内容来手动组合这两个文件，则映射在chrome 中正常工作，指向style.scss 中的正确位置。
知道这里会发生什么吗？
编辑：Microsoft Edge（Windows 10 中的新 IE）在其浏览器内开发工具中正确理解映射。
编辑 2： Firefox 遇到的问题与 Chrome 完全相同。
编辑 3： 我添加了另一个 scss 源文件，test.scss：
div {
color: red;
}
然后我将它导入到style.scss 文件中，现在看起来像这样：
@import 'reset';
@import 'test';
body {
background: #555555;
color: white;
}
Chrome 似乎理解有多个源文件，但映射的位置不正确，并且从未指向 style.scss。
再次，Edge 和 Webstorm 完美运行。 Chrome 和 Firefox 也有同样的问题。
【问题讨论】：
-
如果直接用Sass编译，而不是通过Gulp编译，问题是一样的吗？
-
输出有点不同，但确实如此。所以这是一个开始；我只需要弄清楚最大的区别是什么，然后是为什么。好建议。
-
@cimmanon：我更改了 gulp-sourcemaps 设置以更好地匹配原始 sass 输出，并且发生了同样的问题。剩下的唯一真正的区别是实际的映射。然后，我将 base64 编码映射从工作 sass 输出复制到不工作的 gulp-sourcemaps 输出。这行得通。所以问题归结为实际的编码映射。
-
此外，我刚刚恢复了我的 gulp 配置更改，以便输出恢复为我希望它的格式（与原始 sass 输出不匹配），然后我再次复制/粘贴base64 编码映射到输出以替换 gulp 生成的编码映射，并且它起作用了。
-
好的，我做了另一个测试，我在另一个任务中直接使用了
node-sass，并且输出有效。所以问题似乎出在gulp-sass代码中。
标签： sass google-chrome-devtools source-maps gulp-sass gulp-sourcemaps