Linux下Blazor项目与Razor文件同名时CSS加载失败求助
问题原因
这是.NET 5 Blazor的静态资源路径解析bug,同时满足以下两个条件时会触发:
- Razor组件文件名(
Dummy.razor)与类库项目名(Dummy)完全一致 - 通过
AdditionalAssemblies将该类库组件引入主项目
Blazor生成组件关联CSS的资源路径时,会混淆组件文件名和项目名的命名空间/路径标识,导致最终生成的资源URL无法匹配实际CSS文件,且这类路径解析错误属于静默失败,不会在控制台抛出明确错误。
解决方案
- 修改组件文件名:这是你已经验证有效的方案,将
Dummy.razor改为其他名称(比如DummyPage.razor),同步修改对应的.razor.css和.razor.cs文件名,确保组件名与项目名不重复。 - 升级.NET版本:该bug在.NET 6及后续版本中已被修复,若可以升级项目到.NET 6或更高版本,无需修改文件名即可彻底解决问题。
临时替代方案(不修改文件名/版本)
如果暂时无法修改文件名或升级框架,可手动将组件CSS改为全局CSS,或在组件的OnInitializedAsync方法中通过JS动态加载CSS:
protected override async Task OnInitializedAsync() { await JSRuntime.InvokeVoidAsync("loadCss", "/_content/Dummy/page/Dummy.razor.css"); }
对应的JS代码(放在主项目wwwroot/js目录下):
window.loadCss = function(url) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; document.head.appendChild(link); }
内容的提问来源于stack exchange,提问作者esswar Saravanan
相关产品推荐
相关产品推荐

