Blazor Server（含SignalR）CSS隔离样式文件404问题求助

问题描述 #

Blazor Server（基于SignalR）应用中CSS隔离功能失效，通过VS模板新建「Blazor Server App Empty」项目测试时，所有手动添加的CSS隔离文件链接均返回404错误，尝试添加builder.WebHost.UseStaticWebAssets()配置后问题依旧。

相关代码 #

Program.cs #

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();

MainLayout.razor #

@inherits LayoutComponentBase
<main> @Body </main>

App.razor #

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

_Imports.razor #

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using EmptyBlazorApp1

Pages\Index.razor #

@page "/"
<h1>Hello, world!</h1>

Pages_Host.cshtml #

@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace EmptyBlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <base href="~/" />
    <link rel="stylesheet" href="css/site.css" />
    
@* Problem : None of the links works. All returning 404 *@
<link rel="stylesheet" href="EmptyBlazorApp1.styles.css" />
<link rel="stylesheet" href="_content/EmptyBlazorApp1/EmptyBlazorApp1.bundle.scp.css" />
<link rel="stylesheet" href="_content/EmptyBlazorApp1.styles.css" />
<link rel="stylesheet" href="_framework/EmptyBlazorApp1.styles.css" />
<link rel="stylesheet" href="_framework/EmptyBlazorApp1/EmptyBlazorApp1.bundle.scp.css" />

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

解决方案 #

Blazor Server完全兼容CSS隔离，问题出在错误的手动链接方式和未创建隔离样式文件：

• 删除手动添加的CSS隔离链接：Blazor会自动通过HeadOutlet组件注入生成的隔离样式文件，你手动填写的所有路径都是错误的，直接删除_Host中所有EmptyBlazorApp1.styles.css相关的link标签。
• 创建对应的隔离样式文件：要启用CSS隔离，需为组件/页面创建.razor.css后缀的文件，比如给Index.razor创建Index.razor.css，写入测试样式（如h1 { color: blue; }）；给MainLayout.razor创建MainLayout.razor.css。
• 确认基础配置：保留Program.cs中的app.UseStaticFiles()，这是静态资源访问的必要配置；开发环境下无需手动添加UseStaticWebAssets，VS模板会自动处理。

完成以上步骤后重新编译运行，浏览器的head标签中会自动出现正确的隔离样式链接，不会再返回404。

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