Blazor类库内UI的CSS隔离功能失效，如何解决？

问题 #

我有一个Blazor Web可执行项目（client_server），以及一个存放所有页面的类库项目（client_server_ui）。使用CSS隔离时，ExamplePage.razor.css的样式并未被合并到生成的AssemblyName.styles.css文件中。尝试在client_server_ui/_Host.html中添加以下链接均无效：

• <link href="client_server.styles.css" rel="stylesheet" />：文件已生成，但不含目标样式
• <link href="client_server_ui.styles.css" rel="stylesheet" />：文件未生成

相关代码：

ExamplePage.razor #

@page "/example"

<h1>Scoped CSS Example</h1>

ExamplePage.razor.css #

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

解决方法 #

1. 确认类库的CSS隔离配置 #

检查client_server_ui项目的.csproj文件，确保已开启CSS隔离支持（.NET 6+默认开启，旧版本需手动配置）：

<PropertyGroup>
    <TargetFramework>net6.0</TargetFramework> <!-- 匹配你的Blazor版本 -->
    <EnableScopedCss>true</EnableScopedCss>
</PropertyGroup>

2. 正确引用类库样式 #

不要在类库的_Host.html中添加链接，而是在**Web可执行项目（client_server）**的_Host.html（Blazor Server）或index.html（Blazor WebAssembly）中处理：
Blazor默认会将类库的隔离样式合并到Web项目的client_server.styles.css中，只要确保：

• Web项目已正确引用client_server_ui类库
• 清理并重新生成整个解决方案：删除bin/obj文件夹，执行dotnet clean和dotnet build

3. 强制生成独立的类库样式文件 #

如果自动合并失效，可在类库的.csproj中添加配置，指定生成独立的样式文件：

<PropertyGroup>
    <ScopedCssOutputFileName>client_server_ui.styles.css</ScopedCssOutputFileName>
</PropertyGroup>

然后在Web项目的_Host.html中添加以下引用（注意路径前缀_content/类库名称/）：

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

4. 验证CSS隔离标识 #

检查生成的HTML，确认ExamplePage组件的根元素带有b-{随机哈希值}的属性，对应的CSS样式也带有该属性选择器。如果没有，说明隔离未生效，需重新检查项目配置。

内容的提问来源于stack exchange，提问作者Дмитрий Соловьев