google-chrome - ソースマップまたはクロム開発ツールを取得して CSS の起源を示すことができない

Question

SASSを使用し、gulpを使用してファイルを連結し、要素を検査すると、cssがどこから来ているのかわかりません。Chrome Dev Tools は、CSS の行番号とファイル番号を指定しません。メインファイル main.scss があり、その中に2つの異なるファイルをインポートしています

@import "test1";
@import "test2";

これらの各ファイルには、テスト用のコードが 1 行あります。

// test1.scss
    .test{
        background: #ccc;
    }
// test2.scss
    .test{
        background:#red;
    }

以下は、出力ファイルを生成するための私のgulpコードです。

gulp.task("css:vendorTest", ["clean:vendorTestCss"], function () {
    gulp.src([
            "Content/Styles/main.scss"
    ])
        .pipe(sass())
        .pipe(sourcemaps.init()) // gulp-sourcemaps
        .pipe(concat("vendorTest.min.css")) // gulp-concat, simply brings them to one file. 
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.cssDest));
});

これの要素を調べると、chrome dev ツールに表示されます。 「main.scss:4」リンクをクリックすると、main.scss css リファレンス ページに移動しますが、行番号や、元の test2.scss などの元のファイルが表示されません。 . これは、実際のサイトで使用すると大きな問題になります。コンパイルされたファイルには 16,000 行の css が含まれることになり、css セレクターの起源を見つける方法がないからです。これがソースマップの設定方法の問題なのか、それとも chrome dev ツールの問題なのかわかりません。どんな提案も役に立ちます、ありがとう！