Blazor编译后Razor页面HTML未生成匹配的作用域CSS选择器如何解决？

针对你遇到的作用域CSS编译正常但HTML未生成对应b-xxx属性的情况，按以下步骤排查修复：

• 确认组件渲染模式
  Blazor静态服务器渲染（SSR）模式下不会自动添加作用域属性，只有交互式渲染模式（Interactive Server/WebAssembly/Auto）才会生成。
  解决方法：

  1. 全局配置默认交互式渲染模式：在Program.cs中添加交互式组件服务，并在App.razor指定渲染模式：

     // Program.cs
     builder.Services.AddRazorComponents()
         .AddInteractiveServerComponents(); // 或AddInteractiveWebAssemblyComponents()
     

     <!-- App.razor -->
     <Routes @rendermode="@RenderMode.InteractiveServer" />
     

  2. 给单个组件指定渲染模式：

     <AppBar class="test-class" @rendermode="InteractiveServer" />
     

• 检查作用域CSS文件关联
  确保AppBar.razor.css与AppBar.razor在同一目录，且文件名完全匹配（注意大小写，虽然Windows不敏感，但保持一致避免潜在问题）。

• 验证项目文件配置
  打开项目的.csproj文件，确认没有禁用作用域CSS，且文件被正确包含：

  <PropertyGroup>
    <ScopedCssEnabled>true</ScopedCssEnabled> <!-- 确保这个属性为true -->
  </PropertyGroup>
  <ItemGroup>
    <Content Include="**/*.razor.css" /> <!-- 确保作用域CSS文件被包含 -->
  </ItemGroup>
  

• 清理缓存并重建项目
  执行以下操作彻底清理编译缓存：

  1. 点击VS菜单Build -> Clean Solution
  2. 手动删除项目根目录下的bin和obj文件夹
  3. 重新生成解决方案（Build -> Rebuild Solution）

• 确认样式文件加载路径
  在浏览器开发者工具的网络面板中，检查MyAssemblyName.styles.css是否成功加载。如果是Web项目本身，引用路径应为：

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

  如果是类库组件，需添加_content前缀：

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

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