在不同项目复用Blazor组件时CSS样式未生效的问题咨询

故障场景 #

自主开发的Blazor Razor类库（RCL）打包为NuGet包，在新项目安装引用组件后，组件的文本内容可正常渲染，但所有CSS样式完全失效，组件仅包含HTML和CSS逻辑，无JS相关代码。

分步排查与解决 #

• 确认RCL项目基础配置
  首先检查RCL的.csproj项目文件，需满足两个要求：
  1. 项目SDK为Microsoft.NET.Sdk.Razor，不是普通的.NET类库SDK
  2. 已开启静态web资产打包配置，添加如下节点：

  <PropertyGroup>
    <GenerateStaticWebAssetsManifest>true</GenerateStaticWebAssetsManifest>
  </PropertyGroup>
  

• 确认RCL静态资源存放路径规范
  所有CSS、图片等静态资源必须存放在RCL项目的wwwroot目录下，打包时该目录下的内容会被自动识别为静态web资产，随NuGet包一起分发。
• 手动在新项目中引入RCL的静态资源
  这是最容易遗漏的核心步骤：RCL的静态资源不会自动注入到引用项目，需要你手动在新项目的入口HTML文件的<head>标签中添加样式引用，引用路径的固定格式为_content/[你的RCL程序集名称]/[资源在RCL wwwroot下的相对路径]
  示例：如果你的RCL程序集名称为MyCustomLayout，导航菜单CSS路径为wwwroot/css/nav-menu.css，则引用代码为：

  <link rel="stylesheet" href="_content/MyCustomLayout/css/nav-menu.css" />
  

  不同Blazor项目的入口文件路径：
  • Blazor Server（.NET 6+）：Pages/_Layout.cshtml
  • Blazor Server（旧版本）：Pages/_Host.cshtml
  • Blazor WebAssembly：wwwroot/index.html
• 特殊场景：使用组件级CSS隔离的情况
  如果你使用了Blazor的.razor.css组件隔离样式，无需单独引用每个CSS文件，只需在入口文件中引入RCL的隔离样式打包文件即可，路径格式为：

  <link rel="stylesheet" href="_content/[你的RCL程序集名称]/[你的RCL程序集名称].styles.css" />
  

• 验证NuGet包完整性
  若完成上述步骤仍未解决，可将生成的.nupkg文件后缀修改为.zip解压，检查staticwebassets目录下是否存在对应的CSS资源，确认打包环节没有遗漏静态文件。

内容的提问来源于stack exchange，提问作者user7422837