:root CSS 有时没有加载？

Question

我正在开发一个使用ASP.net 和MVC5 和Razor 的网络应用程序。

我在我的 CSS 中使用了一些变量来处理我的样式中的重复值，我就是这样做的：

:root {
    --base-color: #15616b;
    --color-bg-b-1: #15616b;
    --color-bg-b-2: #1a8b97;
    --color-bg-b-3: #6ca9b3;
    --color-bg-b-4: #a0c0c6;
    --small-tile-text: #297d88;
    --color-tile-shock: var(--color-bg-b-2);
    --color-tile-alarm: #3ab5b0;
    --color-tile-inactive: #a8dad8;
    --color-glyph-help: var(--color-bg-b-3);
    --color-h2: var(--color-bg-b-2);
    --color-loader: var(--color-bg-b-2);
    --color-form-title: #297d88;
    --color-button: #009688;
    --color-selected-row: #009688;
    --color-label: #297d88;
    --color-mybtn-hover: var(--color-bg-b-2);
    --color-mybtn: #3ab5b0;
}

有时，当我部署新版本的应用时，这些值没有加载，我需要刷新页面才能正确查看我的页面。

问题出现在不同的浏览器中。

我做错了什么？这可能是由于这一行：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);

也许如果加载失败（有时 Chrome 会阻止它），其他一切都会吗？

PS。我在网上看到使用 CSS 变量可能不好，有没有更好的方法来做到这一点？

Answer 1

这可能是由于浏览器缓存，这就是为什么它会在再次刷新后工作。

您可以使用缓存破坏器来确保您部署的版本是您想要的版本。

缓存破坏者可能会在包含的末尾添加时间戳，例如：

//Pre cache buster
<link href="stylesheet.css" type="text/css" rel="stylesheet">

//Post cache buster
<link href="stylesheet.css?1522063943" type="text/css" rel="stylesheet">

这将强制浏览器再次获取样式表，因为从技术上讲它是一个不同的 url。

CSS 变量根本不是一个坏主意，但我不建议像您那样将变量放在变量中：

--color-h2: var(--color-bg-b-2);