配置AddRazorRuntimeCompilation后CSS Isolation失效如何解决

问题根因 #

开启Razor运行时编译后，默认会跳过构建阶段的CSS隔离scope标识符生成流程，导致页面DOM元素上自动挂载的b-xxxxxx属性，与生成的{项目名}.styles.css文件中样式选择器的scope标识不匹配，最终样式无法命中对应元素。

修复步骤 #

• 首先修改项目根目录下的.csproj工程文件，在PropertyGroup节点添加如下配置，确保CSS隔离功能全局启用，兼容运行时编译场景：

<PropertyGroup>
  <!-- 全局启用CSS隔离功能 -->
  <ScopedCssEnabled>true</ScopedCssEnabled>
  <!-- 保留构建阶段的Razor编译与隔离样式标识生成逻辑 -->
  <RazorCompileOnBuild>true</RazorCompileOnBuild>
  <!-- .NET 7及以上版本额外添加此行，显式启用运行时编译下的CSS隔离支持 -->
  <ScopedCssRuntimeCompilationEnabled>true</ScopedCssRuntimeCompilationEnabled>
</PropertyGroup>

• 调整Program.cs中的运行时编译配置，添加对隔离样式文件的变更监控：

using Microsoft.Extensions.FileProviders;

// 原有配置替换为以下代码
builder.Services.AddRazorPages()
    .AddRazorRuntimeCompilation(options =>
    {
        options.FileProviders.Add(new PhysicalFileProvider(builder.Environment.ContentRootPath));
    });

• 清理构建缓存后重启项目
  删除项目根目录下的bin、obj文件夹，执行dotnet build重新构建项目，启动应用后验证DOM元素的scope属性与CSS文件中的选择器标识是否一致即可。

备选方案 #

如果仅在开发阶段临时使用运行时编译，生产环境发布时可以直接移除AddRazorRuntimeCompilation()配置，CSS隔离功能会自动恢复正常。

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