Blazor with SignalR using scoped CSS isolation results in 404

In my Blazor SignalR WebApp the scoped CSS isolation is not working. So, I created a new "Blazor Server App Empty" using the VS template to be sure not having a misconfiguration and added just the stylesheet links in _Host.cshtml. I always get 404 for the css.

Here is the code - 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 : Non 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>

All links are causing 404 errors:

I also tried adding builder.WebHost.UseStaticWebAssets(), but I still http 404 errors.

Are Blazor SignalR web apps not compatible with CSS isolation?

Solution

After checking the issue, I found we should add a .razor.css file Enable CSS isolation. In my sample project, I create a Index.razor.css, and it works well.

If not using the .razor.css file.