如何使用Compass（SASS）在Chrome中使用CSS源映射 [英] How to make CSS sourcemapping work in Chrome with Compass (SASS)

问题描述

事情是，我试图获得CSS映射工作与我的Compass项目在Chrome（v38，OS X）所以它重新加载我的CSS，而不需要重新加载页面。

我按照此 https://developer.chrome.com/devtools/docs / css-preprocessors 以及此 http：// www .sitepoint.com / using-source-maps-debug-sass-chrome /

我已经完全使用Compass项目，我正在使用<$

进入 Config.rb 我添加了 sourcemap = true 和 .map 文件已成功创建。

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

在Chrome的设置中也启用了CSS源映射和自动重新加载生成的CSS

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

因此，总结：

• 我没有Compass编译等问题。


• .map 通过我的HTTP服务器编译并加载200 OK响应


• 我可以在样式检查器中看到 .scss body {...} style.scss：18 因此Chrome与我的 .map 档案通讯


• 当编译我的SCSS时，只有当我重新打开它时，才会在DevTools中出现更改


• 重新打开后，我可以在Style标签中看到CSS更改，我的页面

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

解决方案

您错过了几个步骤：

strong> Chrome < 53 在Chrome中启用自动重新载入生成的CSS源代码地图（ DevTools > 来源标签，找到您生成的CSS文件，右键单击它，然后选择映射到网络资源，并在显示的下拉菜单中选择相同的文件名

Chrome请求您重新加载DevTools，接受

Chrome> = 53 >

1. 在Chrome中启用CSS源代码地图（ DevTools > Settings > 首选项> 来源）


2. 在来源标签中，右键单击任意位置，然后选择


3. Chrome请求您完全访问此文件夹，接受


4. 在来源标签，找到您生成的CSS文件，右键点击它，选择映射到文件系统资源，并在显示的下拉菜单中选择相同的文件名

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

the thing is that I'm trying to get CSS mapping working with my Compass project in Chrome (v38, OS X) so It reloads my CSS without the need to reload page.

I followed this https://developer.chrome.com/devtools/docs/css-preprocessors and also this http://www.sitepoint.com/using-source-maps-debug-sass-chrome/

I have fully working Compass project and I'm compiling using compass watch.

Into Config.rb I have added sourcemap = true and .map file has been successfully created.

When I load my site, I can see .map file loaded in Network tab in Console (status code 200)

Enable CSS source maps and Auto-reload generated CSS is also on in Chrome's Settings.

But when I recompile css changes don't appear in DevTools nor in page. However when I reopen DevTools I can see changes in Styles tab but they're not applied into page.

So, to sum up:

• I have no problems with Compass compilation etc.
• .map file is compiled and loaded through my HTTP server with 200 OK response
• I can see .scss references in Style inspector eg. body {...} style.scss:18 so Chrome communicated with my .map file
• When my SCSS is compiled, changes appear in DevTools only when I reopen it
• After reopening, I can see CSS changes in Style tab but they're not applied into my page

Any ideas what might be the issue here? Thanks

解决方案

You've missed a few steps :

Chrome < 53

1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences)
2. Enable auto-reload generated CSS source map in Chrome (DevTools > Settings > General)
3. Add your project folder in the Chrome workspace (DevTools > Settings > Workspace)
4. Chrome ask you for a full access to this folder, accept
5. In the Sources tab, find your generated CSS file, right click on it and choose Map to network ressource, and select the same file name in the shown dropdown
6. Chrome ask you to reload DevTools, accept

Chrome >= 53

1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences > Sources)
2. In the Sources tab, right click anywhere and choose Add folder to workspace, and select your project folder.
3. Chrome ask you for a full access to this folder, accept
4. In the Sources tab, find your generated CSS file, right click on it and chosse Map to file system ressource, and select the same file name in the shown dropdown

Now, you can change your Sass file in your favorite editor (you then need to watch it, or relaunch sass command), or directly in Chrome Devtools: select your file, edit it and save it.

这篇关于如何使用Compass（SASS）在Chrome中使用CSS源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！