请教一下 Blazor web app Razor 类库文件夹下的 css 隔离失效问题

Question

929Free 621

问题1: 我新建了一个 Razor 类库, 在当前项目中直接新建一个 Example.razor 文件, 随后我又新建一个 Example.razor.css

Example.razor:

@page "/example"  <h1>Scoped CSS Example</h1>  @code {  }

Example.razor.css:

h1 {
    color: red;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

此时打开 /example 页面, css 隔离是有效的, 随后我在工程里新建文件夹 MyComponent, 然后再创建

Component.razor 文件和 Component.razor.css 文件

Component.razor :

@page "/component4"

<h1>Scoped CSS Example 4</h1>  @code {  }

Component.razor.css :

body {
}
h1 {
    color: red;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

此时打开 /component4 页面, css 隔离无效，请教下是我哪里少引用了还是缺失了什么？这个问题该如何解决呢？还是说 .razor 文件不能放文件夹下？

问题2: CSS 隔离有时会显示不出来，但是重新把文件删了再新建，又显示正常了，代码内容都是一样的，CSS 隔离与浏览器的缓存有关系吗？

以上问题都是基于 Blazor web app (.net 9.0),

IDE： Microsoft Visual Studio Community 2022 (64 位)版本 17.13.1

接受的答案

0 个其他答案

Answer 1

我创建了.net9 blazor web app和 Razor类库，根据你的提示暂未发现您描述的问题1中的现象。

我除了根据您的提示创建两个页面外，还添加了AddAdditionalAssemblies配置。一切在我这里运行的很好，暂未遇到您说的有时有效有时无效。

app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode().AddAdditionalAssemblies(typeof(<类库项目名字>._Imports).Assembly);

当用户再次访问同一网站时，浏览器会优先从本地缓存中加载这些资源，而不是重新从服务器下载，从而加快页面加载速度并减少网络带宽消耗。

所以对于您的第二个问题，如果您没有做额外的配置的话，这是浏览器进行控制的。通常我们开发者在网页开发过程中，会使用时间戳进行强制刷新。在Blazor中，我们可以使用ETag等http headers进行控制。

如果答案是正确的解决方案，请点击“接受答案”并投赞成票。如果您对此答案有其他问题，请点击“评论”。

注意：如果您想接收此线程的相关电子邮件通知，请按照我们的文档中的步骤启用电子邮件通知。

Best Regards

Jason