.NET 6 Blazor Server-Side CSS隔离失效 样式文件访问404问题

以下是可直接验证的根因及修复方法：

• 静态文件中间件顺序错误
  .NET 中静态文件中间件需放置在路由、认证授权中间件之前才会生效，打开Program.cs（或Startup.cs）确认执行顺序符合要求：

  // 正确顺序示例
  app.UseHttpsRedirection();
  app.UseStaticFiles(); // 必须在UseRouting、UseAuthorization之前执行
  app.UseRouting();
  app.UseAuthorization();
  app.MapBlazorHub();
  app.MapFallbackToPage("/_Host");
  

• 样式引用路径配置错误
  1. 检查_Layout.cshtml中的base标签是否为默认配置<base href="~/" />，自定义base路径会导致相对路径引用失效
  2. 将自动生成的样式引用修改为站点根目录相对路径，避免子路径部署场景下的路径错误：

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

• 项目配置异常
  打开.csproj文件，在PropertyGroup节点中确认未禁用CSS隔离打包功能：

  <!-- 确保该配置为false，或缺省不配置（默认值为false） -->
  <DisableScopedCssBundling>false</DisableScopedCssBundling>
  

• 增量构建缓存异常
  手动删除项目根目录下的bin、obj文件夹，执行清理解决方案后重新构建运行，部分增量构建场景会导致静态文件虚拟映射未同步更新。
• 服务端静态文件处理规则异常
  若使用IIS/IIS Express部署，检查站点web.config中未错误移除静态文件处理Handler；若使用自定义静态文件配置，确认未限制.css文件的访问权限。

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