5

我在 OSX 上，我希望能够使用新的源映射功能在 Chrome（或 Canary）开发人员工具中调试 Sass 生成的 CSS在 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 金丝雀
  • 转到 chrome://flags 并启用“启用开发人员工具实验”设置
  • 打开 Web Developer Tools (Function-12)，点击窗口右下角的齿轮，在 General 选项卡上勾选“Enable source maps”，在 Experiments 选项卡上勾选“Support for Sass”。
  • 重启金丝雀

但是当我在开发者工具中检查一个元素时，我只是得到了对糟糕的 CSS 文件的相同的旧引用。我想查看元素样式在 SCSS 文件中的来源。有没有人在 Chrome OSX 甚至 FireSass 上遇到过这个问题？

4

2 回答 2

8

对于那些对当前预发布版本的 SASS 和指南针有问题的人：您并不孤单，有一个解决方法！

当前的预发布版本与指南针不兼容。您需要能够在没有错误的情况下运行命令“compass”，并且在安装 alpha 版本 162 时，您会收到 LoadError。

相反，使用以下命令安装版本 141：

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

注意：您需要当前稳定版本的 compass，而不是预发布版本。compass 的预发布版本似乎不适用于 build 162或141。此外，您应该在 sass 的预发布版本之前安装 compass，因为 compass 也会安装当前发布的 sass 版本。

希望有帮助！

于 2013-06-02T14:05:44.200 回答
3

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

于 2013-04-18T11:24:24.253 回答