【发布时间】:2013-07-19 19:12:09
【问题描述】:
在 Chrome Canary(版本 30.0.1570.0 canary)中,我设置了 sass 源映射如下:
- DevTools > Settings > General > Enable CSS source maps + Auto-reload generated CSS CHECKED!
- DevTools > 设置 > 添加文件夹
public
我的文件夹结构如下:
public
sass
_buttons.scss
style.scss
css
style.css
index.html (with link href=css/style.css)
在 DevTools 中,我可以执行 inspect element 并看到样式规则来自 _buttons.scss。我可以单击 _buttons.scss 并让 DevTools 显示 scss 源。我可以在 devtools 中修改源并点击 cmd+s 并将其保存到磁盘,当切换到 sublime 时,文件已更新。但是在 Chrome 中,css 不会自动重新加载。我必须手动刷新页面才能重新加载 css。
Sass 版本:
$ sass -v
$ Sass 3.3.0.alpha.149 (Bleeding Edge)
我看的是:
$ sass --scss --sourcemap --watch public/sass:public/css
还有其他人对 Chrome (Canary) 中的 Auto-reload generated CSS 有问题吗?
我也尝试过 Chrome“正常”(20.0...)和同样的问题,没有自动重新加载。
【问题讨论】:
-
我遇到了同样的问题。你可以试试tin.cr,当你保存在 devtools 中时它会自动重新加载。
-
不,无法让 tin.cr 在 Chrome 或 Canary 上运行。没有什么是自动重新加载的。尝试使用 file://...index.html 和 http://....index.html 并尝试使用 sass 和普通 css。您是否让您的工作流程与 tin.cr @alpacalips 一起工作?遇到这些问题的人真的不多吗?
-
有没有办法手动告诉 chrome 重新加载它的 css 的?
-
如果是,则存在一个已知问题,当从源映射中找到的 URL 计算的 scss 文件的 URL 包含“../”目录时,该问题会阻止此功能正常工作。作为一种解决方法,您可以尝试将 sass/ 作为 css/ 目录的子目录,看看它是否能解决问题。
-
@AlexanderPavlov 这对我来说是个问题。删除了源映射中的“../”并且它起作用了。
标签: google-chrome sass google-chrome-devtools