如何使用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)

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

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并选择chosse ,然后在显示的下拉列表中选择相同的文件名

现在,您可以在您喜欢的编辑器中更改您的Sass文件(然后您需要观看它,或重新启动sass命令),或直接在Chrome Devtools中更改:选择您的文件,编辑并保存.