代码之家 › 专栏 › 技术社区 › BBaysinger alex

SASS sourcemaps在Google Chrome中不起作用

grunt-contrib-sass source-maps sass google-chrome css

3

BBaysinger alex · 技术社区 · 7 年前

我启用了CSS源代码映射,但是googlechrome的行为就像它们被禁用一样。在我查看的所有资源中,我需要做的就是在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: {
            }
        }
    },

本网站通过 grunt serve 在OSX上,源映射由grunt contrib sass生成。

调试这个的下一步是什么?我应该能够看到Chrome是否正在向 .map 文件夹?我错过什么了吗?

更新: 我想我已经确定没有加载映射,因为sourceMappingURL不在编译的CSS中。我已经敞开心扉了 a new issue for that

2 回复 | 直到 7 年前

1

2

karthick 7 年前

在评论中看到你的回应之后。我加上这个作为答案

您的sourcemap没有加载的原因是,您将grunt contrib sass与dart sass一起使用。

Dart sass是ruby sass的最新重写。Grunt contrib sass是为使用Ruby sass而开发的。

所以我建议你卸载sass。做一个ruby sass的gem安装。或者将sass configs的语法更改为新的configs https://www.npmjs.com/package/sass . 但我不确定这是否适用于当前的设置。因此,建议采用前一种解决方案。

https://github.com/gruntjs/grunt-contrib-sass#sourcemap

2

BBaysinger alex 7 年前

事实证明,auto prefixer是在编译的CSS上运行的,并且去掉了sourceMapURL注释,现在这样做是有意义的,因为除非打开auto prefixer源映射(我没有打开),否则会使源映射不真实。我从中学到的一件很酷的事情是,auto prefixer显然能够使用Sass源代码映射来创建自己的源代码,并保持Sass文件的真实性。

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