Sass 源映射不会在 Chrome 中自动刷新

Posted 2023-03-06

【中文标题】Sass 源映射不会在 Chrome 中自动刷新

【英文标题】：Sass source maps not auto-refreshing in Chrome

【发布时间】：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 这对我来说是个问题。删除了源映射中的“../”并且它起作用了。

【参考方案1】：

您是否尝试过使用工作区？这就是我使用的，它对我来说很好用，而且一直都是。最近有很多东西已经脱离了实验，所以也许这就是它不起作用的原因？