c# - Blazor WebAssembly CSS 隔离范围标识不匹配

Question

在 Blazor WebAssembly .NET Core 托管应用程序中，将 {PROJECT NAME}.Client 项目名称更改为“{PROJECT NAME}.Admin”（更改客户端项目名称）后，范围标识 {PROJECT NAME} 中的 CSS 隔离。 Admin.styles.css 文件和 DOM 中渲染的对象是不同的。

---

我做了什么

我创建了一个带有身份验证的 .NET 核心托管的 Blazor WebAssembly 应用程序。运行应用程序。工作得很好。

然后我更改了 {PROJECT NAME} 的项目名称。客户项目到“{PROJECT NAME}.Admin”。并且基本上在“客户端”到“管理员”的所有地方都发生了变化。

• 提到命名空间的所有地方
• 项目文件夹中的客户端文件夹

然后我添加了项目引用。

当我运行这个项目时…… 这是登陆页面。

---

问题

所有功能都可以正常工作。所有组件都被渲染。但是只有 Bootstrap 样式应用于 MainLayout 和 NavMenu 组件，因为它们使用 CSS 隔离。隔离的 CSS 文件生成的文件范围标识与呈现给 DOM 的内容不同。

{PROJECT NAME}.Admin.styles.css 文件的图像

渲染 HTML的图像

如果我手动更改范围标识，则页面呈现良好。但是当我下次运行应用程序时它会重置。

---

我只是在玩 Blazor。所以我期待解决这个问题，而不是一些替代方法或解决方法来做造型。我是新来的在线论坛。很抱歉提供了不必要的信息或提供的信息较少。请索取所需的任何其他信息。

标签： c#cssasp.net-coreblazorblazor-webassembly

Answer 1

对我有用的是删除obj和bin文件夹，除了将指向 css 文件的链接重命名为 {AssemblyName}.styles.css。如果它与 AssemblyName 不同，则将其设置为 ProjectName 不起作用。

这样我就没有必要删除和重新创建特定的 css 文件。注意：我正在使用带有 ASP.NET 5 的 Blazor 服务器