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

时间:2015-12-03 19:33:02

标签: sass google-chrome-devtools source-maps gulp-sass gulp-sourcemaps

我有一个名为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也有同样的问题。

1 个答案:

答案 0 :(得分:0)

我从未尝试过调试我认为是错误的实际源映射合并。

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

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

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

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

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