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

【问题标题】：.Net 6 Blazor Server-Side CSS Isolation not working.Net 6 Blazor 服务器端 CSS 隔离不起作用
【发布时间】：2022-06-26 21:45:21
【问题描述】：

我创建了一个新的 .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" 但是当我使用 Kernel 或 IIS Express 运行项目时，我得到一个 404 未找到 CSS，如果我尝试手动导航到 CSS，我也找不到它。有任何想法吗？我的 csproj 没有任何会影响它的标志。

【问题讨论】：

远射，但是 - 您添加的任何类型的预处理都会引发错误？
你的意思是像 SCSS 还是 SASS？我没有类似的东西，只有普通的 CSS。此外，除了 404 本身没有错误
如果我将环境切换为“开发”而不是“本地”，它似乎又可以工作了。我在 .NET 5 Blazor 应用程序上遇到了类似的情况，我不得不添加 webBuilder.UseStaticWebAssets () 在 Program.cs 文件上，但在 .Net 6 上我们没有那个文件和那个 CreateHostBuilder 了..
您所描述的确切原因是有道理的。如果您希望静态资产在非默认环境（如“本地”）中发布，您需要在 webbuilder 上调用该 UseStaticWebAssets。即使文件结构最小，您仍然可以访问主机上下文。
好的，这有帮助！我想了解现在发生了什么，我看到很多其他用户在 GitHub 上遇到了类似的问题。问题是我怎么打那个电话？我试过 builder.WebHost.UseStaticWebAssets();在我的 Program.cs 上并没有工作，它在运行时出错：“System.NotSupportedException：'Web 根目录从“C:\Data\Git\WebApps\CustomerPortal\CustomerPortal\wwwroot”更改为“C: \Data\Git\WebApps\CustomerPortal\CustomerPortal\"。不支持使用 WebApplicationBuilder.WebHost 更改主机配置。请改用 WebApplication.CreateBuilder(WebApplicationOptions)。'"

标签： css blazor-server-side .net-6.0

【解决方案1】：

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

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

#3 的完整示例

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

话虽这么说 - 我想他们最终会堵住这个漏洞并为UseStaticWebAssets() 提供平价。你可以在this open GitHub issue看到这项工作的进展。

【讨论】：

【解决方案2】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

当我遇到这个错误时，是因为我用连字符命名了我的 MVC 项目：htmx-spike。

当我从模板 (dotnet new mvc -o htmx-spike) 生成项目时，工具将 命名空间 重命名为 htmx_spike — 使用下划线而不是连字符，因为 C# 中不允许使用连字符标识符——并将修改后的名称用作 _Layout.cshtml 中的 CSS 文件名。

然而，事实证明，在这种情况下，CSS 位置实际上仍然与项目名称相对应，带有连字符。所以自动生成的代码不正确，导致返回 404：

一旦我用连字符将link 元素中的文件重命名为正确的名称，一切都很好。

【讨论】：