启用 RCL 的 CSS 隔离以在 Blazor 服务器中工作

Question

我有一个 razor 类库和使用该库的 blazor 服务器，RCL 中的每个组件都有自己的 css，在阅读了 microsoft ASP.NET Core Blazor CSS 隔离的文档后，我执行了以下操作：

1. 在 blazor 服务器的 razor 页面中，我添加了组件：<MyComponent />
2. 在 _Host 页面中，我添加了捆绑链接：<link href="Blazor.Components.styles.css" rel="stylesheet">。

运行应用程序后，我看不到 MyComponent 的 css。

我做错了什么吗？你能给我一些建议吗？我读过这个页面，它遵循相同的方法，但适用于 Webassemble!。

谢谢。

Answer 1

引用Razor 类库 (RCL) 支持文档：

当 Razor 类库 (RCL) 提供独立样式时，标记的 href 属性指向 {STATIC WEB ASSET BASE PATH}/{ASSEMBLY NAME}.bundle.scp.css，其中占位符为：

• {STATIC WEB ASSET BASE PATH}：静态 Web 资产基本路径。
• {ASSEMBLY NAME}：类库的程序集名称。

在以下示例中：

• 静态Web资源基本路径是_content/ClassLib。
• 类库的程序集名称是 ClassLib。

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

在 _Host 页面中，您应该添加类似以下内容：

<link href="_content/YourClassLib/YourClassLib.bundle.scp.css" rel="stylesheet">