css - SASS sourcemaps 在谷歌浏览器中不工作

Question

我启用了 CSS 源映射，但谷歌浏览器的行为就像它们被禁用一样。在我查看的所有资源中，我需要做的就是在 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 文件发出(失败？)请求？我错过了什么吗？

---

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

Answer 1

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

你的 sourcemap 没有加载的原因是你正在使用带有 dart sass 的 grunt-contrib-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