1

问题是我正在尝试让 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 更改，但它们没有应用到我的页面中

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

4

1 回答 1

5

你错过了几个步骤：

铬 < 53

  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，接受

铬 >= 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 Devtools 中：选择您的文件，编辑并保存它。

于 2014-10-20T06:36:07.273 回答