为什么 chrome 不理解我的 scss 源映射？

Question

我有一个名为 style.scss 的 scss 源文件，它位于 /style:

@import 'reset';

body {
  background: #555555;
  color: white;
}

另一个名为 reset.scss 的 scss 源文件位于 /style:

* {
  padding: 0;
  margin: 0;
}

这些由 sass 编译，源映射到 style.min.css，位于 /style:

*{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.[= 中的正确位置33=]

知道这里会发生什么吗？

编辑： 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 有同样的问题。

Answer 1

我从来没有抽出时间调试我认为有问题的实际 sourcemap 合并。

在尝试调试合并的同时，我向 gulp-sourcemaps 项目提交了一个问题，解释说如果新的 sourcemap 可以覆盖而不是被覆盖，则可以避免合并问题合并。显然这是一种解决方法而不是修复方法，但它可以完成工作。

vinyl-sourcemaps-apply 项目的维护者进行了更改，当现有源映射没有映射时，会导致新的源映射被覆盖：

https://github.com/floridoo/vinyl-sourcemaps-apply/commit/30320c97c112f44ccba02dd73ce5bed1ad4361de

虽然这不是一个 100% 完美的解决方案，但它很实用并且解决了我眼前的问题。错误的合并仍然是一个问题，但不是我现在必须处理的问题，因为我的问题已通过此解决方法解决。

如果您运行涉及相关问题并且确实需要合并源映射，则该问题似乎可能出在 https://github.com/mozilla/source-map/ 项目中。

为什么 chrome 不理解我的 scss 源映射？

Why doesn't chrome understand my scss source map?

sass

google-chrome-devtools

source-maps

gulp-sass

gulp-sourcemaps