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

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

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

缓存占用者可能会在include的末尾添加时间戳，例如：

//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);

：root CSS有时没有加载？

1 个答案: