.NET 7 Razor Pages发布至Azure后导航栏消失问题

问题情况 #

基于.NET 7.0的Razor Pages应用，使用默认配置并引入Blazorise组件，本地Visual Studio运行完全正常，但发布到Azure App Service后，仅显示@page "/"对应的Razor组件内容，MainLayout包含的侧边导航栏、顶部导航栏完全不加载。已尝试重建、清理、多次重新发布，问题未解决。

排查结论 #

问题根源在于CSS隔离机制生成的wwwroot/App.styles.css文件：该文件中带b-前缀的随机类标识符，与页面HTML渲染出的b-标识符不匹配。本地开发环境生成的App.styles.css包含正确匹配的标识符，通过Kudu控制台替换Azure上的对应文件后，页面恢复正常，但该方案是临时的，应用更新后会再次失效。

持久化解决方案 #

方案1：禁用CSS隔离（如果业务不需要） #

如果项目不需要使用CSS隔离特性，可以直接在项目文件（.csproj）中添加配置禁用：

<PropertyGroup>
  <!-- 禁用CSS隔离的捆绑，保留单个组件的scoped CSS文件 -->
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
  <!-- 或者彻底禁用CSS隔离 -->
  <!-- <ScopedCssEnabled>false</ScopedCssEnabled> -->
</PropertyGroup>

方案2：确保发布时正确部署App.styles.css #

1. 检查项目文件配置，确保App.styles.css被正确包含并发布：
   打开项目文件，确认没有排除该文件的配置，同时添加发布时的复制规则：

   <Content Include="wwwroot\App.styles.css" CopyToPublishDirectory="PreserveNewest" />
   

2. 清理Azure上的旧部署文件：
   通过Kudu控制台进入site\wwwroot目录，删除所有旧文件后重新发布，避免旧的App.styles.css残留覆盖新生成的正确文件。

方案3：检查Blazorise与CSS隔离的兼容性 #

确保Blazorise的初始化配置正确，避免与CSS隔离冲突：

• 在Program.cs中确认Blazorise服务注册和静态资源引用正确：

  builder.Services.AddBlazorise(options =>
  {
      options.Immediate = true;
  })
  .AddBootstrap5Providers()
  .AddFontAwesomeIcons();
  
  // 确保静态资源中间件正确配置
  app.UseStaticFiles();
  

附：相关代码示例 #

_Host.cshtml代码 #

@page "/"
@namespace YourApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

异常时F12页面输出（简化版） #

<!-- 仅渲染了根页面组件，无MainLayout结构，且CSS类标识符不匹配 -->
<div class="b-abc123-page-content">...</div>
<!-- 对应Azure上App.styles.css中的类为.b-def456-page-content { ... } -->

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