SASS sourcemaps 在 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 文件发出（失败？）请求？我错过了什么吗？

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

Answer 1

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

你的 sourcemap 没有加载的原因是你正在使用 grunt-contrib-sass with dart sass.

Dart-sass 是最近重写的 ruby sass。 Grunt-contrib-sass 被开发为与 Ruby sass.

一起工作

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

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

Answer 2

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

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

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

SASS sourcemaps 在 Google Chrome 中不起作用

SASS sourcemaps not working in Google Chrome

css

google-chrome

sass

source-maps

grunt-contrib-sass