为什么 Blazor CSS 隔离不添加链接标签来加载捆绑的 css 文件？

Question

我为 WASM 项目中的 css 隔离功能创建了一个 Blazor 组件和一个随附的 css 文件。呈现页面时，我的元素没有获得 css 文件中定义的 css 样式。在检查元素时，我可以看到应用到它的额外的 b-* 属性。我可以看到一个 MyProject.Client.styles.css 文件，在 ...\obj\Debug\net5.0\scopedcss\bundle\MyProject.Client.styles.css 下的 css 文件中添加了额外的 b-*。(* 是一些随机字符)

但是，我预计 Blazor 构建会在 Head 部分添加一个链接标记，以便浏览器加载这个新的捆绑 css 文件，但它不在那里。我使用 Fiddler 并验证浏览器没有加载 *.styles.css，这就是问题所在。已经清除了缓存和应用程序。

我是否缺少一些手动步骤或 css 隔离设置来添加链接标签？我正在使用 .NET 5.0 发行版。

Answer 1

我在基于 .NET 6 的 Blazor Server 项目中遇到了非常类似的问题，我在该项目中利用了MudBlazor组件库。我必须比公认的答案更深入一些。

我的一个页面需要对表格中的条件背景颜色进行一些调整，但我无法应用独立 CSS 文件中的类。经过几个小时在互联网上的研究并尝试将我的自定义 CSS 类从独立的 CSS 文件转移到wwwroot\css\styles.css我的项目文件夹结构以及用于 CSS 隔离的样式表链接的各种位置

<link href="<MyAssemblyName>.styles.css" rel="stylesheet"/>

事实证明，CSS 隔离仅适用于纯 HTML，不适用于 Razor 组件、标签帮助程序等。如MSDN 文档中所述：

重要提示：作用域 CSS 仅适用于 HTML 元素，不适用于 Razor 组件或标记帮助程序，包括应用了标记帮助程序的元素，例如<input asp-for="..." />.

MudBlazor 组件肯定是 Razor 组件，因此不支持作用域 CSS 功能。我必须将自定义 CSS 类保留在wwwroot\css\styles.css样式表中。这样我就能够在页面/组件上实现我需要的外观。

如果您确实需要应用范围 CSS，您可以尝试使用此处::deep描述的解决方法。

Answer 2

您必须手动将捆绑的 CSS 文件的标签添加到主机页面。Blazor 不会为您添加此内容。

<link href="MyProjectName.styles.css" rel="stylesheet">