Blazor 与 SignalR 使用作用域 CSS 隔离导致 404

问题描述 投票:0回答:1

在我的 Blazor SignalR WebApp 中,作用域 CSS 隔离不起作用。因此,我通过 vs.net 模板创建了一个新的“Blazor Server App Empty”,以确保没有配置错误,并仅在 _Host.cshtml 中添加了样式表链接。我总是得到 404 的 CSS。

这是代码:

程序.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>

_进口.razor

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

页面\Index.razor

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

页面\_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>

所有链接都有 404... All links having 404...

我也尝试添加 builder.WebHost.UseStaticWebAssets(),但仍然是 404。

Blazor SignalR WebApps 与 CSS 隔离不兼容吗?

blazor-server-side asp.net-core-signalr
1个回答
0
投票

检查问题后,我发现我们应该添加一个

.razor.css
文件启用CSS隔离。在我的示例项目中,我创建了一个
Index.razor.css
,并且效果很好。

enter image description here

enter image description here


如果不使用

.razor.css
文件。

enter image description here

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.