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

Posted

技术标签:

【中文标题】启动应用程序时 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 中链接为&lt;link href="css/app.css" rel="stylesheet" /&gt; 不确定index.razor 将如何获得访问权限 您使用的是旧版本的 Blazor 吗?我使用的是 6.0,它 (1) 没有 app.css 文件; (2) 对 .css 所做的任何更改都会立即热加载。至于非自动更新,这是设计使然:浏览器缓存文件,因此不会在用户每次返回页面时自动重新加载。

以上是关于启动应用程序时 Blazor css 文件未更新的主要内容,如果未能解决你的问题,请参考以下文章

参数更新后 Blazor 页面未重新呈现

Blazor 组件在 StateHasChanged() 之后未更新

从深层链接启动应用程序时未调用 AppDelegate ContinueUserActivity,应归咎于 Firebase SDK

CSS 文件在部署时未更新(Google AppEngine)

更改 CSS 文件时 React 不更新

Blazor - 身份在应用程序启动时添加角色