为何重命名shared文件夹下的NavMenu组件会导致CSS失效

根因说明 #

该问题由Blazor内置的**CSS隔离（Scoped CSS）**机制导致：

• 每个带独立.razor.css文件的组件，编译阶段会被自动标记唯一的自定义属性，对应的隔离样式也会被统一编译进{Assembly}.styles.css文件
• 重命名组件或者新建逻辑相同的新组件时，如果没有同步调整对应的.razor.css文件名和组件名匹配，CSS隔离机制不会将该组件的样式纳入编译范围，就会出现样式丢失的情况
• 全局搜索找不到额外的NavMenu引用，是因为样式和组件的绑定是编译阶段自动完成的，不会硬编码在运行时代码中

修复步骤 #

按以下顺序排查即可解决：

1. 核对文件命名匹配规则
   • 若新建组件名为CustomNavMenu.razor，对应的隔离CSS文件必须命名为CustomNavMenu.razor.css，且与组件文件放在同一目录下
   • 若是重命名原有NavMenu组件，需要同步把NavMenu.razor.css改成和新组件名完全匹配的名称，同时把原文件中的样式内容复制到新的CSS文件中
2. 确认CSS隔离功能未被禁用
   打开项目的.csproj文件，检查配置中CSS隔离处于开启状态：

   <PropertyGroup>
     <!-- 确保该值为true，没有被手动设置为false -->
     <ScopedCssEnabled>true</ScopedCssEnabled>
   </PropertyGroup>
   

3. 清理缓存重新编译
   • 删除项目根目录下的bin、obj文件夹
   • 依次执行dotnet clean、dotnet build命令重新生成项目，确保新的样式被正确编译进{Assembly}.styles.css
4. 检查入口文件的样式引用
   确认index.html（Wasm模式）或_Layout.cshtml/_Host.cshtml（Server模式）中，{Assembly}.styles.css的引用路径正确，示例写法如下：

   <link rel="stylesheet" href="你的项目程序集名称.styles.css" />
   

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