当 SASS 重新编译 CSS 时，Chrome 的“自动重新加载生成的 CSS”不会重新加载页面答案

【问题标题】：Chrome's "Auto-Reload Generated CSS" not reloading page when SASS recompiles CSS当 SASS 重新编译 CSS 时，Chrome 的“自动重新加载生成的 CSS”不会重新加载页面
【发布时间】：2014-01-20 03:05:24
【问题描述】：

我正在尝试让 Chrome 的 DevTools 在我保存观看的 SCSS 文件时自动重新加载页面，该文件将编译并更改 CSS 文件。

我选中了自动重新加载生成的 CSS 选项，但遗憾的是，它没有按预期工作。

每当我对 SCSS 文件进行更改并保存时，页面都不会重新加载。我已将工作文件夹添加到工作区，并将文件（SCSS 文件和生成的 CSS）映射到本地系统驱动器上的各自版本。然而，这并没有帮助。

随着 scss 文件反映在 DevTools 检查器中，SASS 源映射似乎工作正常：

我使用的是 Chrome 版本 31：

我错过了什么我不知道的事情吗？我还需要做什么才能使其正常工作？

【问题讨论】：

我遇到了同样的问题。唯一想到的是您的网络服务器可能不会发送 Last-Modified 标头。（不过，它并没有为我解决问题）
在 Chrome 44 中遇到同样的问题。

标签： html css google-chrome sass

【解决方案1】：

我在这种情况下使用了drupal，drupal 会生成像'style.css?abc' 这样的css 链接。这个后缀“?abc”有问题。您需要从 LOCAL（按右键单击本地）'style.css' 开始文件映射到 WEB 'style.css?abc'（显示在列表中）。不是从 WEB 到 LOCAL。如果结果正确，则 WEB 链接将从“资源”选项卡的列表中消失。

【讨论】：

如果您使用的是drupal，这可能会派上用场：drupal.org/node/1462572
这个答案与OP的问题无关。

【解决方案2】：

这是一个很好的解决方案，可以避免 .css?201203241721 / .js?201203241721-files 的映射问题，因为 szdv 在 drupal 中提到。我遇到了typo3，这解决了它：

    /* remove in production *************************************************/
    //filter typo3 temp file src/href with ?date ending for chrome workspaces
    $('script, link').each(function(){
        rpString = /\?[0-9]*/;
        if(this.src){
            this.src = this.src.replace(rpString,'');
        }
        if(this.href){
            this.href = this.href.replace(rpString,'');
        }
    });
    /* ******************** *************************************************/

【讨论】：

先生，我更新了我的答案。认为解决方案/问题与 chrome 无法在 .css 之后映射带有数字的文件有关？（问号），一旦更新。这通常用于让浏览器在 cms 中更新后不使用已兑现的文件。虽然，对于开发来说，最好用上面的 javascript 将其关闭或删除。不要在生产中使用该脚本，因为 .css?... 通常是杀死浏览器更新文件的好方法。