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 文件。