在OSX上调试Chrome中的Sass

Question

我在OSX上,我希望能够使用新的源地图功能在Chrome(或Canary)开发人员工具中调试Sass生成的CSS .我正在使用Sass和Compass.

我按照说明让Sass生成源映射文件.为了任何正在努力解决这个问题的人的利益,步骤是:

• 安装预发布版本的Sass sudo gem install sass --pre
• 检查您的Compass版本 - 您需要12.2,而不是13 alpha.如果您需要卸载它,您可以使用它sudo gem uninstall compass --version 0.13.alpha.2.
• 将其添加到config.rb文件中sass_options = {:sourcemap => true}.
• 转到包含config.rb的文件夹并运行sass --compass --sourcemap --watch scss:css(这告诉Sass将scss文件夹中的文件编译为css文件夹中的CSS文件).

如果一切正常,当你在我们的一个scss文件(比如styles.scss)中进行更改时,Sass将编译一个新的CSS文件 - 同时它将创建一个名为styles.css.map的文件,其中包含在开发人员工具中选择元素时,应该允许Chrome将您指向源SCSS文件的映射信息.

我成功地让我的Sass生成了这个文件.但不幸的是,Chrome拒绝对它做任何事情.我已经完成了建议的步骤:

• 安装Chrome Canary
• 转到chrome:// flags并启用"启用开发人员工具实验"设置
• 打开Web开发人员工具(功能-12),单击窗口右下角的齿轮,在常规选项卡上勾选"启用源地图",然后在实验选项卡上勾选"支持Sass".
• 重启金丝雀

但是,当我检查开发人员工具中的一个元素时,我只是得到了与粗糙的CSS文件相同的旧引用.我想看看元素的样式在SCSS文件中的起源.有人在Chrome OSX上,甚至FireSass都有运气吗？

Answer 1

对于那些当前预发布版本的SASS和指南针有问题的人:你并不孤单,有一个解决方法!

目前的预发行版本与指南针不兼容.您需要能够在没有错误的情况下运行命令'compass',并且在安装了alpha版本162时,您将获得LoadError.

而是使用以下命令安装版本141:

gem install sass -v 3.3.0.alpha.141 --pre

注意:您需要当前稳定版本的指南针,而不是预发行版.指南针的预发布版本似乎不适用于构建162 或 141.此外,您应该在预发布版本的sass之前安装指南针,因为指南针还将安装当前发布的sass版本.

希望有所帮助!

Answer 2

源映射确实可以在 OSX Chrome 中使用！我的开发环境中有几个样式表，并且我愚蠢地检查了属于还没有 .css.map 文件的样式表的样式。如果您按照上述步骤操作，这应该对您有用，甚至可能使用当前版本的 Chrome。