.NET 8 预览版 6 中不使用新项目模板提供 Blazor CSS 文件

发布于09月01日

我已经为.NET8预览版6开始了一个新的Blazor项目.

在主索引页上，我编写了以下代码，添加了一个可选参数:

@page "/{optional?}"

<PageTitle>Home</PageTitle>

<h1>Home</h1>

Welcome to your new app.
@Optional

@code {
    [Parameter]
    public string Optional { get; set; }
}

现在的问题是，在本地主机上，Bundle 的css文件被视为GET个请求的参数，并且页面没有添加样式.

localhost/ProjectName.styles.css

在这里，当浏览器try 获取样式表字符串时，将在GET请求上考虑ProjectName.styles.css.

如何将生成的css文件移到子文件夹？

有没有办法在不更改代码的情况下解决这个问题？

推荐答案

我转载了你的问题:

在.NET 8预览版6中不支持Blazor css文件

如果您在地址栏中输入urilocalhost/ProjectName.styles.css，它将转到您的索引页而不是css文件.

如果您注释此行:

app.MapRazorComponents<App>();

并再次try 使用uri，您将收到css文件.

根据这doc条:

CSS隔离发生在构建时.Blazor将CSS Select 器重写为匹配组件呈现的标记.重写的css样式是作为静态assets资源进行Bundle 和生产. 而这issue个与

确定静态assets资源的位置没有任何意义，但您可以修改静态文件的请求路径以避免冲突(如果您希望将代码保留在Index页面中)

app.UseStaticFiles("/MyStaticFiles");

并修改您的app.razor中的链接:

.....
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link rel="stylesheet" href="MyStaticFiles/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="MyStaticFiles/css/bootstrap-icons/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="MyStaticFiles/css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="MyStaticFiles/BlazorApp2.styles.css" />
    <HeadOutlet />
</head>
......

Now it works :