无法获得sourcecmaps或chrome dev工具来显示CSS的来源

Question

当使用SASS并使用gulp连接我的文件时，检查元素我无法看到css的来源。 chrome Dev Tools没有为CSS指定行和文件号。 我有一个主文件main.scss，我在其中导入2个不同的文件

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

在每个文件中，我都有一行代码用于测试，

// 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工具中看到的。 当我点击链接＆＃34; main.scss：4＆＃34; link转到main.scss css参考页面，但是我无法看到任何行号或原始文件，例如它最初来自的test2.scss。 当在实际站点上使用时，这是一个大问题，因为编译的文件最终有16,000行css，并且无法找到css选择器的起源。 我不知道这是关于我如何设置源图，或者它是chrome dev工具的问题？任何建议都会有所帮助，谢谢！

Answer 1

为此，您需要一个源映射文件。

我使用考拉应用程序将sass转换为css，在其中，可以选择创建.map文件

relevant screenshot