.NET 8 Preview 6 Blazor项目CSS文件被识别为路由参数的解决咨询

你的问题根源是根路由/{optional?}会匹配所有根路径下的请求，包括ProjectName.styles.css，导致样式请求被路由到Index页面，无法正确加载样式。以下是两种解决思路：

无需修改Index.razor的解决办法 #

• 优先处理静态文件请求：在Program.cs中先注册匹配样式文件的端点，让静态文件处理逻辑优先于Blazor路由。添加代码如下：

// 优先处理样式文件请求
app.MapWhen(context => context.Request.Path.Equals("/ProjectName.styles.css"), app =>
{
    app.UseStaticFiles();
});

// 再注册Blazor组件路由
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

这样样式文件的请求会直接被静态文件中间件处理，不会进入Blazor的路由匹配流程。

• 使用绝对路径引用样式：在项目的入口页面（WebAssembly项目为wwwroot/index.html，Server项目为Pages/_Host.cshtml）中，修改样式引用为带~/前缀的绝对路径：

<link href="~/ProjectName.styles.css" rel="stylesheet" />

这会让浏览器明确从网站根目录请求样式文件，避免被路由参数捕获。

将CSS文件移至子文件夹的办法 #

• 修改项目配置指定输出路径：打开项目的.csproj文件，添加以下配置，将静态资源（包括样式文件）输出到css子文件夹：

<PropertyGroup>
  <StaticWebAssetBasePath>css</StaticWebAssetBasePath>
</PropertyGroup>

如果需要仅调整样式文件的路径，可改用更精准的配置：

<ItemGroup>
  <None Update="ProjectName.styles.css">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <Link>css/ProjectName.styles.css</Link>
  </None>
</ItemGroup>

• 更新样式引用路径：修改入口页面中的样式引用，指向子文件夹路径：

<link href="css/ProjectName.styles.css" rel="stylesheet" />

此时样式文件会被请求到子文件夹下，不会触发根路由的匹配逻辑。

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