如何使用 Compass (SASS) 在 Chrome 中使用 CSS 源映射

Question

问题是我正在尝试让 CSS 映射与我在 Chrome（v38，OS X）中的 Compass 项目一起工作，因此它会重新加载我的 CSS 而无需重新加载页面。

我关注了这个https://developer.chrome.com/devtools/docs/css-preprocessors 和这个http://www.sitepoint.com/using-source-maps-debug-sass-chrome/

我有完整的 Compass 项目，我正在使用 compass watch 进行编译。

到Config.rb我已经添加sourcemap = true和.map文件已经成功创建。

当我加载我的网站时，我可以在控制台的网络选项卡中看到 .map 文件（状态代码 200）

Enable CSS source maps 和 Auto-reload generated CSS 也在 Chrome 的设置中打开。

但是当我重新编译 css 时，更改不会出现在 DevTools 或页面中。但是，当我重新打开 DevTools 时，我可以看到样式选项卡中的更改，但它们并未应用到页面中。

所以，总结一下：

• 我在 Compass 编译等方面没有任何问题。
• .map 文件通过我的 HTTP 服务器编译并加载，响应为 200 OK
• 我可以在样式检查器中看到.scss 引用，例如。 body {...} style.scss:18 所以 Chrome 与我的 .map 文件进行了通信
• 编译我的 SCSS 后，只有在我重新打开它时才会在 DevTools 中显示更改
• 重新打开后，我可以在样式选项卡中看到 CSS 更改，但它们没有应用到我的页面中

有什么想法可能是这里的问题吗？谢谢

Answer 1

您错过了几个步骤：

Chrome

1. 在 Chrome 中启用 CSS 源映射（DevTools > Settings > Preferences）
2. 在 Chrome 中启用自动重新加载生成的 CSS 源映射（DevTools > Settings > General）
3. 在 Chrome 工作区中添加您的项目文件夹（DevTools > Settings > Workspace）
4. Chrome 要求您获得对此文件夹的完全访问权限，接受
5. 在 Sources 选项卡中，找到您生成的 CSS 文件，右键单击它并选择 Map to network ressource，然后在显示的下拉列表中选择相同的文件名
6. Chrome 要求您重新加载 DevTools，接受

Chrome >= 53

1. 在 Chrome 中启用 CSS 源映射（DevTools > Settings > Preferences > Sources）
2. 在 Sources 选项卡中，右键单击任意位置并选择 Add folder to workspace，然后选择您的项目文件夹。
3. Chrome 要求您获得对此文件夹的完全访问权限，接受
4. 在 Sources 选项卡中，找到生成的 CSS 文件，右键单击它并选择 Map to file system ressource，然后在显示的下拉列表中选择相同的文件名

现在，您可以在您喜欢的编辑器中更改您的 Sass 文件（然后您需要观看它，或重新启动 sass 命令），或直接在 Chrome 开发工具中：选择您的文件，编辑它并保存。