启动应用程序时 Blazor css 文件未更新

Posted 2023-03-27

【中文标题】启动应用程序时 Blazor css 文件未更新

【英文标题】：Blazor css file not updating when app is launched

【发布时间】：2022-01-10 09:48:28

【问题描述】：

我在 Blazor 中将一些来自 bootstraps 网站的自定义 CSS 添加到我的 app.css 文件中，而该文件是在 Visual Studio 中编辑并保存的。当应用程序启动并加载 app.css 时，它会加载旧版本的 app.css，而无需我进行任何更改。有谁知道为什么会发生这种情况？提前致谢

编辑的 CSS 文件

// ... some more css above....

.b-example-divider 
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);


#blazor-error-ui 
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;

#blazor-error-ui .dismiss 
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;

应用程序加载 app.css

缺少.b-example-divider 并且只是按照我更改之前的状态加载文档

【问题讨论】：

您是否在打开开发人员工具的情况下尝试了 CTRL-F5？

@BrianParker 这样做可以让 app.css 正确显示。这是做什么的，我每次都必须这样做吗？

清除缓存。 CSS 仅在 dev 中是动态的。我不会太强调它。

【参考方案1】：

如果您没有看到应用到 app.css 文件的更改，您可能需要手动清除浏览器缓存。

更好的解决方案是使用如下所示的版本控制：

<link rel="stylesheet" type="text/css" href="css/app.css?version=0.1">

添加版本号作为查询参数。这将迫使浏览器寻找最新版本的样式表...

【参考方案2】：

浏览器缓存文件。您在哪里以及如何声明指向此文件的链接？

【讨论】：

这是链接到项目模板的默认 app.cs 文件。在index.html 中链接为<link href="css/app.css" rel="stylesheet" /> 不确定index.razor 将如何获得访问权限

您使用的是旧版本的 Blazor 吗？我使用的是 6.0，它 (1) 没有 app.css 文件； (2) 对 .css 所做的任何更改都会立即热加载。至于非自动更新，这是设计使然：浏览器缓存文件，因此不会在用户每次返回页面时自动重新加载。