Blazor根路径带参数配置导致项目CSS失效问题求助

你遇到的CSS失效问题，核心原因是路由规则拦截了CSS资源的请求：

• 当你把Index.razor的路由设为@page "/{Username}"时，这个动态路由会匹配所有根路径下的单段请求（比如/nike、/_content）。
• Blazor的路由优先级会让这个动态路由优先匹配，导致浏览器请求CSS隔离文件（路径通常是/_content/YourProjectName/Index.razor.{hash}.css）时，_content被当作Username参数，框架会渲染Index组件，而不是返回实际的CSS文件，最终导致所有隔离CSS加载失败。
• 当路由改成user/{Username}时，该路由只会匹配/user/xxx的请求，不会拦截/_content/...这类资源请求，所以CSS能正常加载。

方案1：调整路由规则，添加静态前缀（推荐） #

给动态路由加一个不会和资源路径冲突的前缀，比如@page "/u/{Username}"，这样路由只会匹配/u/nike这类请求，不会拦截/_content/...的资源请求。

方案2：修改路由匹配优先级，排除资源路径 #

如果一定要用根路径的动态路由，可以通过路由约束排除掉资源相关的路径，比如：

@page "/{Username:not(_content|_framework|css|js)}"

这个约束会让路由只匹配不是_content、_framework、css、js的单段路径，避免拦截资源请求。

方案3：禁用组件CSS隔离，改用全局CSS #

如果不需要组件级的CSS隔离，可以在项目文件（.csproj）中禁用CSS隔离：

<PropertyGroup>
  <ScopedCssEnabled>false</ScopedCssEnabled>
</PropertyGroup>

然后把原来的Index.razor.css内容移到wwwroot/css/app.css这类全局CSS文件中。

方案4：配置基础路径（适用于Blazor WebAssembly） #

如果是Blazor WebAssembly项目，确保wwwroot/index.html中的基础路径设置为绝对路径：

<base href="/" />

（注：默认已经是这个设置，但如果之前修改过需恢复。此方案仅辅助确保资源路径解析正确，需配合方案2使用才能解决路由拦截问题。）

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