1

I have an scss source file named style.scss which resides within /style:

@import 'reset';

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

And another scss source file named reset.scss which resides within /style:

* {
  padding: 0;
  margin: 0;
}

These are compiled by sass with a source map in to style.min.css which resides within /style:

*{padding:0;margin:0}body{background:#555555;color:white}

/*# sourceMappingURL=style.min.css.map */

This is the resulting map file, style.min.css.map which resides in /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"}

I am using gulp to invoke sass. Here is the relevant configuration:

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 seems to understand this perfectly.

Chrome DevTools fails to understand the mapping correctly. It is clearly trying; but all mappings point to reset.scss in various locations rather than the correct file and location. If I manually combine both files by replacing the @import with the actual content of reset.scss, the mappings work correctly in chrome, pointing to the correct location within style.scss.

Any idea what could be going on here?

EDIT: Microsoft Edge (the new IE in Windows 10) understands the mappings correctly within its in-browser dev tools.

EDIT 2: Firefox is experiencing the same issue as Chrome in exactly the same way.

EDIT 3: I Added another scss source file, test.scss:

div {
  color: red;
}

I then imported this in to the style.scss file which now looks like this:

@import 'reset';
@import 'test';

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

Chrome seems to understand that there are multiple source files, but the mapped locations aren't correct, and style.scss is never pointed to.

Again, Edge and Webstorm work perfectly. Chrome and Firefox have the same issue.

4

1 回答 1

0

我从来没有花时间调试我认为有问题的实际源映射合并。

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

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

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

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

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

于 2015-12-27T19:33:10.443 回答