SASS /源地图未加载嵌套结构答案

【问题标题】：SASS / source maps not loading with nested structuresSASS /源地图未加载嵌套结构
【发布时间】：2017-02-04 06:20:43
【问题描述】：

我从位于同一目录中的所有 SASS 文件转到嵌套结构，如下所示。现在，当我检查 chrome 中的元素时，它会将我带到不正确的源映射。例如，当我检查一个按钮时，它没有转到 _buttons 部分，而是转到另一个不相关的随机部分。有谁知道为什么会这样？我的 gulp 文件是否需要更改？

【问题讨论】：

标签： javascript css angularjs sass gulp

【解决方案1】：

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

问题与我们如何在 main.scss 文件中一起导入 sass 和 css 文件以及在 gulp 文件中复制 css 文件有关。最简单的解决方案是包含 sass-module-importer。 gulp 文件在下面使用最终解决方案进行了更新。

【讨论】：

【解决方案2】：

你有 *.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

【讨论】：

我进行了上述更改，但没有看到正确的源映射。我还在上面添加了一张 gulp 配置的图片
可能你错过了var sourcemaps = require('gulp-sourcemaps');
文件里有这个
我已经更新了我的答案