Blazor WebAssembly ASP.NET Core Hosted模式下CSS热重载失效问题

根因说明 #

这是Visual Studio 2022 17.0.0版本搭配.NET 6开发时的已知适配问题，触发逻辑和托管模式的资源提供逻辑有关：

• 非托管模式下，Blazor WebAssembly项目由前端独立的开发服务器提供静态资源，内置了完整的CSS变更监听和热重载推送逻辑
• 勾选「ASP.NET Core hosted」选项后，所有静态资源（包括CSS文件）由后端ASP.NET Core宿主进程提供，17.0.0版本的VS热重载模块没有对该场景做CSS变更的监听绑定，仅同步了Razor文件的热重载逻辑，因此CSS修改不会自动推送到浏览器

解决方案 #

方案1：版本升级（推荐） #

直接升级Visual Studio 2022到17.1及以上正式版本，微软已在该版本的更新补丁中修复了托管模式下的CSS热重载适配问题，升级后无需额外修改配置即可正常使用。

方案2：手动配置适配（针对无法升级VS的场景） #

1. 打开ASP.NET Core宿主项目的Program.cs文件，在开发环境配置块中补充热重载中间件注册：

if (builder.Environment.IsDevelopment())
{
    // 原有开发环境配置保持不变，新增下一行
    app.UseHotReload();
}

2. 右键点击解决方案 → 选择「属性」→ 进入「调试」设置页，确保「启用热重载」选项处于勾选状态
3. 重启项目后即可生效

临时兼容方案 #

如果不想修改配置也不想升级VS，修改CSS文件后手动点击VS顶部导航栏的热重载火焰图标，即可手动触发CSS变更推送到浏览器，无需手动刷新页面。

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