【发布时间】：2014-01-05 17:18:46
【问题描述】：
我正在尝试让 SASS 源映射和自动重新加载/保存到磁盘工作。我已经用grunt-contrib-sass 设置了所有内容，并观察任务以在更改时重新编译我的.scss，并且我的源映射在 Chrome 中以我可以编辑 SASS 并将其保存到磁盘的方式正常工作。我的问题是，当我编辑 SASS 时，页面会重新加载，就好像根本没有 CSS。如果我然后重新加载页面，我应用的更改确实存在。
知道为什么会这样吗？
在开发工具中更改 sass 之前：http://cl.ly/image/1R2o2I113H3y 之后：http://cl.ly/image/1m0V3b0J420X
我正在使用 Google Canary 33.0.1738.0
【问题讨论】：
-
很难从给出的信息中知道发生了什么。重新加载新 CSS 后，使用开发工具检查页面。
style或link标签中有什么？他们甚至在场吗？他们有某种错误的文本吗？检查页面以找出阻止应用重新加载的样式的原因，并从那里进行故障排除。 -
如果我在进行更改后检查 DOM，我的 .css 文件的链接标签就在那里，当我在 DOM 树中突出显示链接标签（只需单击它）时，我可以再次看到我的样式，但是源映射停止工作，即我在开发工具中所做的编辑只会影响 .css 文件。
-
"我在开发工具中所做的编辑只影响 .css 文件" 开发工具中的编辑实际上并不编辑任何文件。这只是预览潜在编辑的一种方式。您的浏览器没有这些文件的写入权限。源映射允许您查看事物映射到您自己的源的位置，但它不允许您编辑该源。
-
你可以，实际上 :) youtube.com/watch?v=x6qe_kVaBpg 5:30 左右
标签： css google-chrome sass google-chrome-devtools source-maps