通过 Sources 面板编辑时，Chrome 只为页面重新加载 CSS 一次

Question

我使用的是 Mac，ma​​cOS High Sierra 10.13.6

自从我在一两周前更新了 Chrome 以来，我对 CSS 文件（或 SCSS 的价值）所做的更改将始终正确保存，但 Chrome 将只刷新我页面中的样式一次。 本地覆盖已禁用，工作区设置正确，源地图一直正确且到位。除了更新 Chrome 之外，我的环境实际上没有任何变化。

我尝试重置所有缓存，尝试重新加载，甚至删除缓存内部。我尝试了我能想到的任何东西。我在网上进行了研究，但无法找到这个特定问题的答案。

总结一下：

1. 我打开 Chrome
2. 我在本地加载我的页面（本地主机环境）
3. 我打开开发者工具
4. 我在我的页面上选择一个元素
5. 我点击右侧的资源名称（CSS 或 SCSS 文件）
6. 我通过源选项卡更改 CSS/SCSS 文件的源代码
7. 我点击了保存。更改已保存。 Netbeans 如果打开将立即显示更改。如果它是一个 SASS 文件，NetBeans 会在更改时触发编译
8. Chrome 会按应有的方式更新页面中的样式
9. 我在“来源”面板中进行了另一项更改
10. 我保存更改
11. 更改已保存 - 如果 NetBeans 打开，它将立即显示更改，如果是 SASS 文件，它将编译它
12. Chrome 确实不更新页面中的样式。在我重新加载之前永远不会再发生。

我什至重新安装了 Chrome。完全删除 ~/Library/Application Support/Google/Chrome 并重新启动浏览器，从一个全新的配置文件开始。 仍然没有爵士乐。

有人可以在这里指出正确的方向吗？

Answer 1

在我的挫败感达到顶峰之后，我决定从我相当大的页面主 SCSS 文件中精心删减内容，每次都重新加载页面，尝试并测试做出更改。事实证明，一旦我删除了文件顶部的某个@import，问题就消失了。但其他导入工作。

为什么？

导入的文件用于字体。它包含各种@font-face 定义。在底部，我有两个通过 http 引用外部资源的“@import”语句。

我删除了这些和宾果游戏 - 现在 Chrome 正在随着我所做的每一次更改正确更新样式。问题解决了。这是一个错误吗？我不知道。

然后我尝试将导入直接放在主 SCSS 文件的顶部，即使那样它们也会导致问题发生。

SASS 文档有这样的说法：

Plain CSS @imports

Because @import is also defined in CSS, Sass needs a way of compiling plain CSS 
@imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.

换句话说，我基本上写了一个普通的 CSS @import，虽然我没有在其他环境或系统中测试过，但任何这样的陈述似乎都会破坏 Chrome 在完成一次后自动更新页面样式的能力。

因此，为了节省可能偶然发现此问题的其他人的时间：摆脱你的@imports，你会很好的。

this question 接受的答案包含一个很好的解释。