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

BBa*_*ger 5 css google-chrome sass source-maps grunt-contrib-sass

我启用了 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: {
            }
        }
    },
Run Code Online (Sandbox Code Playgroud)

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

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

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


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

BBa*_*ger 2

事实证明,自动前缀器正在编译的 CSS 上运行,并删除了 sourceMapURL 注释,现在这样做是有意义的,因为除非您打开了自动前缀源映射(我没有打开),否则它会这样做使源映射不真实。我从中学到的一件很酷的事情是,自动前缀器显然能够使用 Sass 源映射来使其成为自己的,并使所有内容都忠实于 Sass 文件。

我实际上希望每当自动前缀程序找到源映射但本身没有启用源映射时都会出现警告,因为很明显任务不应该生成不会使用的源映射。

如果我发布整个 Gruntfile,我可能会更早得到答案,但内容很多,而且我正在尝试缩减到我认为相关的代码。该死。