Blazor CSS隔离初始调试无效，保存CSS文件后恢复正常

问题现象 #

• 调试模式启动项目后，Blazor组件的CSS隔离效果初始状态不生效，目标元素未应用预期样式
• 手动保存对应组件的.razor.css文件后，CSS隔离效果立即恢复正常

相关文件与代码 #

文件结构 #

组件位于项目的Components/Pages/Css/目录下，包含两个文件：Isolation.razor和对应的样式文件Isolation.razor.css

Isolation.razor 代码 #

@page "/css/isolation"

<h3>Isolation</h3>
<h1>TEST</h1>

Isolation.razor.css 代码 #

h1 {
    color: tomato;
}

排查过程 #

1. 新建空白Blazor项目复现测试，未出现相同异常
2. 检查项目生成的{ASSEMBLY NAME}.styles.css文件，确认内容正常，已正确生成带作用域标识的CSS规则：

@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* _content/{ASSEMBLY NAME}/Components/Pages/Css/Isolation.razor.rz.scp.css */
h1[b-n08r7a8kqo] {
    color: tomato;
}

临时解决方案 #

将现有项目的所有内容迁移至新创建的Blazor项目后，问题完全消失

可能的问题根源推测 #

虽然未精确定位，但这类异常通常和以下场景有关：

• 项目的MSBuild缓存或编译配置损坏，导致初始调试构建时未正确注入CSS隔离的作用域标识
• .razor.css文件的编译依赖链异常，初始构建未触发Blazor的CSS隔离处理流程
• 项目中引入的第三方组件或自定义构建脚本干扰了Blazor默认的CSS隔离编译逻辑

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