Question

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

源地图位于我的CCS文件旁边，就像这样：

在DevTools>元素>样式中，只有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

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

之所以无法加载源地图，是因为您使用了带有dart sass的grunt-contrib-sass。

Dart-sass是最近对ruby sass的重写。开发Grunt-contrib-sass可以与Ruby sass一起使用。

因此，我建议您卸载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源地图在Google Chrome中不起作用

2 个答案: