5

我启用了 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: {
            }
        }
    },

该站点通过grunt serveOSX 提供服务，源映射由 grunt-contrib-sass 生成。

真正奇怪的是，我有 99% 的把握在我第一次设置它之后就看到它正常工作一次。之后我什么都没改...

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

更新：我想我已经确定地图没有被加载，因为 sourceMappingURL 不存在于编译的 CSS 中。我为此开辟了一个新问题。

4

2 回答 2

2

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

您的源地图未加载的原因是您将 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

于 2018-10-29T19:04:15.387 回答
2

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

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

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

于 2018-11-02T16:08:22.583 回答