css - chrome 上的 Sass source map 支持不起作用

Question

在开始之前，我仔细检查了 StackExchange，但没有找到适合这个问题的任何其他网站。如果我错过了，请原谅。

我关注了this指南，以启用支持 source maps sass 的 chrome，但我无法使其工作。

有趣的是，我按照另一个指南启用了对 Firefox 的支持，并且正在运行。

两者的共同点是在 rails 中设置 config.sass.debug_info = true。

所以，我认为问题不在 rails 上，而是在 chrome 上，但我不确定。

这是我的设置:

• 导轨 3.2.8
• Ubuntu
• Chrome 27.0.1453.110

更新 - 问题似乎出在 Chrome 27.x 系列上。如果是这样的话，这个问题就变成了等待 chrome 开发人员修复的问题。所以我会调查更多，如果我能确认，我会关闭这个问题。感谢您的宝贵时间。

更新 - 看来是真的，这是谷歌浏览器的问题，感谢大家的帮助

Answer 1

问题是 Chrome 开发者工具最近更改了它支持的源映射版本。您提到的文章详细介绍了如何设置旧样式的 CSS 源映射。但是，Chrome 现在支持 version 3 source maps .新的源映射将映射放在一个单独的 *.css.map 文件中，而不是内联在已编译的 CSS 文件中。新格式的好处是它更小并且不会破坏旧版 Internet Explorer 的样式。 link @justin-smith 提供的内容应该为您指明正确的方向。然而，根据我的发现，即使 SASS gem 的预发布版本 3.3 知道如何生成 .map 文件，仍然需要 sass-rails gem 的支持才能正确地从 Rails Assets 管道提供这些文件。我创建了一个 repo为了弄清楚 Rails 中 v3 sass 源映射的当前支持状态。可能有一种方法可以缩短 Assets 管道并让 sass gem 预编译文件并将它们放在 Assets 路径早期的目录中。但是，我还不知道该怎么做。