SASS 源地图在 Google Chrome 中不起作用

Question

我启用了 CSS 源映射，但 Google Chrome 的行为就像它们被禁用一样。在我查看的所有资源中，我需要做的就是在 DevTools 首选项中启用源映射。它显然在那里启用：

源地图位于我的 CCS 文件旁边，如下所示：

在 DevTools > Elements > Styles 中，只有 CSS 文件，没有 SCSS 或 SASS：

这是我在 Gruntfile.js 中的 grunt-contrib-sass 配置：

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.css', '**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css',
                sourcemap: 'auto',
            }],
            options: {
            }
        }
    },

此站点在 OSX 上通过 grunt serve 提供服务，源映射由 grunt-contrib-sass 生成。

真正奇怪的是，我有 99% 的把握在我第一次设置它之后就看到它工作正常。在那之后我没有改变任何东西......

尝试调试此问题的下一步是什么？我是否应该能够查看 Chrome 是否正在向 .map 文件发出（失败？）请求？我错过了什么吗？

---

更新：我想我已经确定地图没有被加载，因为 sourceMappingURL 不存在于编译的 CSS 中。我已经打开了a new issue for that。

Answer 1

事实证明，自动前缀在编译后的 CSS 上运行并去除了 sourceMapURL 注释，现在这样做是有道理的，因为除非你打开了自动前缀源映射（我没有） ，它会使源映射不真实。我从中学到了一件很酷的事情，自动前缀显然能够使用 Sass 源映射来使其成为自己的，并保持所有内容与 Sass 文件一致。

我真的希望自动前缀找到源映射时有一个警告，但它本身没有启用源映射，因为很明显任务不应该生成不会使用的源映射。

如果我能发布我的整个 Gruntfile，我会更有可能更快地得到答案，但这是很多东西，我正在尝试缩减到我认为相关的代码。该死。

Answer 2

在 cmets 中看到您的回复后。我将此添加为答案

你的 sourcemap 没有加载的原因是你使用 grunt-contrib-sass 和 dart sass。

Dart-sass 是最近对 ruby​​ sass 的重写。 Grunt-contrib-sass 是为与 Ruby sass 一起工作而开发的。

所以我建议你卸载 sass。并进行 ruby​​ sass 的 gem 安装。或者将 sass 配置的语法更改为新的配置 https://www.npmjs.com/package/sass。但我不确定这是否适用于当前设置。所以推荐前一种方案。

可以在此处找到 grunt contrib 的源映射要求 https://github.com/gruntjs/grunt-contrib-sass#sourcemap