如何使用Compass（SASS）在Chrome中进行CSS源映射工作

Question

问题是我正在尝试使用我的Compass项目在Chrome（v38，OS X）中使用CSS映射，因此它重新加载我的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）

Chrome浏览器的设置中也会显示

Enable CSS source maps和Auto-reload generated CSS。

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

所以，总结一下：

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

任何想法可能是什么问题？感谢

Answer 1

你错过了几个步骤：

Chrome＆lt; 53

1. 在Chrome中启用CSS源地图（ DevTools ＆gt; 设置＆gt; 偏好设置）
2. 在Chrome中启用自动重新加载生成的CSS源地图（ DevTools ＆gt; 设置＆gt; 常规）
3. 在Chrome工作区中添加项目文件夹（ DevTools ＆gt; 设置＆gt; 工作区）
4. Chrome要求您完全访问此文件夹，接受
5. 在 Sources 标签中，找到生成的CSS文件，右键单击它并选择 Map to network ressource ，然后在显示的下拉列表中选择相同的文件名< / LI>
6. Chrome要求您重新加载DevTools，接受

Chrome＆gt; = 53

1. 在Chrome中启用CSS源地图（ DevTools ＆gt; 设置＆gt; 偏好设置＆gt; 来源）< / LI>
2. 在 Sources 标签中，右键单击任意位置并选择将文件夹添加到工作区，然后选择您的项目文件夹。
3. Chrome要求您完全访问此文件夹，接受
4. 在 Sources 标签中，找到生成的CSS文件，右键单击它并选择映射到文件系统资源，然后在显示的下拉列表中选择相同的文件名

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