1

次の名前のscssソースファイルがstyle.scssあります/style：

@import 'reset';

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

そして、次の名前の別のscssソースファイルreset.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"}

私はsassを呼び出すためにgulpを使用しています。関連する構成は次のとおりです。

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 には同じ問題があります。

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 に答える