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中的正确位置。

知道会发生什么事吗？

编辑： 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-sourcemaps项目提交了一个问题，解释如果新的源映射可以覆盖而不是合并，则可以避免合并问题。显然这是一种解决方法而不是修复，但它可以完成工作。

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

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

虽然这不是100％完美的解决方案，但它是务实的并且解决了我的直接问题。错误的合并仍然是一个问题，但不是我现在必须处理的问题，因为我的问题通过这种解决方法得以解决。

如果您遇到相关问题，并且合法地确实需要合并源图，则问题似乎可能在https://github.com/mozilla/source-map/项目中。

为什么chrome不了解我的scss源地图？

1 个答案: