SASS / 源映射未加載嵌套結構

Question

我從位於同一目錄中的所有 SASS 文件轉到如下嵌套結構。 現在，當我檢查 chrome 中的一個元素時，它會將我帶到不正確的源映射。 例如，當我檢查一個按鈕時，它不會轉到 _buttons 部分，而是轉到另一個不相關的隨機部分。 有誰知道為什么會這樣？ 我的 gulp 文件需要更改嗎？

Answer 1

你有 *.scss 文件，但在你的 gulpjs config.input.sass 中。 可能是錯誤的文件格式。

我使用指南針，它看起來像這樣

gulp.task('compass', function() {
    gulp.src(inputDir+'/*.'+fileType)
        .pipe(compass({
            css: outputDir,
            sass: inputDir,
            sourcemap: true
        }))
        .pipe(gulp.dest(outputDir))
        .pipe(connect.reload());
});

這是我的工作示例。 可以看到生成的 main.css.map 需要安裝https://www.npmjs.com/package/gulp-sass https://www.npmjs.com/package/gulp-sourcemaps

Answer 2

https://www.npmjs.com/package/sass-module-importer

這個問題與我們如何在 main.scss 文件中一起導入 sass 和 css 文件，以及如何在 gulp 文件中復制 css 文件有關。 最簡單的解決方案是包含 sass-module-importer。 下面用最終解決方案更新了 gulp 文件。