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

Question

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

@import 'reset';
body {
  background: #555555;
  color: white;
}

另一个名为reset.scss的scs源文件位于/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":["* {rn  padding: 0;rn  margin: 0;rn}","@import 'reset';rnrnbody {rn  background: #555555;rn  color: white;rn}rn"],"sourceRoot":"/style"}

我在用gullow来调用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无法正确理解映射这显然是在尝试；但所有映射都指向不同位置的CCD_ 9，而不是正确的文件和位置。如果我通过用reset.scss的实际内容替换@import来手动组合这两个文件，则映射在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也有同样的问题。

Answer 1

我从来没有抽出时间调试我认为有缺陷的实际源映射合并。

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

乙烯基源地图应用项目的维护人员进行了一项更改，当现有源地图没有映射时，导致新的源地图被覆盖：

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

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

如果遇到相关问题，并且确实需要合并源映射，则问题可能在https://github.com/mozilla/source-map/项目