.Net 6 Blazor 服务器端 CSS 隔离不起作用

Question

我创建了一个新的 .NET 6 Blazor 服务器端项目并进行了一些更改。我有几个使用 CSS 隔离的文件（如 Contact.razor + Contact.razor.css）。在 _Layout.cshtml 页面中，模板添加了以下内容：

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

其中 CustomerPortal 是我的项目名称。我可以看到文件在“CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\projectbundle\CustomerPortal.bundle.scp.css”和“C:\Data\Git\WebApps\CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\bundle\CustomerPortal.styles.css" 但是当我运行使用内核或 IIS Express 的项目时，如果我尝试手动导航到 CSS，我会收到 404 not found for the CSS，我也无法找到它。有任何想法吗？我的 csproj 没有任何会影响它的标志。

Answer 1

这里有几个选项可以解决这个问题，具体取决于您要采用的方法。我想我们已经弄清楚为什么会这样，但是 UseStaticWebAssets() 似乎不支持新的最小启动代码。所以，这是我能想到的选项。

将您的代码迁移回执行应用程序启动的“旧”方式。这仍然是一种受支持且完全有效的方法，因为存在不支持的边缘情况（如这个）。
将新的 WebApplicationOptions 传递给 CreateBuilder() 方法，并根据环境在单独（且正确）的位置查找静态文件。参见 some examples here.
在现有 builder 的情况下，检查环境并使用 StaticWebAssetsLoader 加载静态 Web 资产。

#3 的完整示例

if (builder.Environment.IsEnvironment("Local"))
{
    StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);
}

话虽这么说 - 我想他们最终会堵上这个洞并为 UseStaticWebAssets() 提供平价。您可以在 this open GitHub issue.

中看到这项工作的进展

Answer 2

对于其他人... 我在 .net 6 blazor 服务器应用程序中遇到了完全相同的问题。对我来说，归根结底是我更改了项目名称，但 _Layout.cshtml 中对 {project}.styles.css 的引用仍然指向旧项目名称。只需将此处的 {project} 更新为正确的项目名称即可解决我的问题。

.Net 6 Blazor 服务器端 CSS 隔离不起作用

.Net 6 Blazor Server-Side CSS Isolation not working

css

blazor-server-side

.net-6.0