你如何让 CSS Isolation 在引用的项目上工作？答案

【问题标题】：How do you make CSS Isolation work on referenced project?你如何让 CSS Isolation 在引用的项目上工作？
【发布时间】：2021-04-21 22:49:25
【问题描述】：

我创建了一个 Razor 库，然后添加了对 Blazor WASM 应用程序中的 dll 文件的引用。将简单的 component1 添加到索引页面中不会引入 css。在解决方案中创建新项目并以这种方式进行引用时，它将按预期工作。

  <ItemGroup>
    <ProjectReference Include="..\..\ComponentLib\MyComponents.csproj" />
  </ItemGroup>

  <ItemGroup>
    <Reference Include="ComponentLib">
      <HintPath>..\..\..\ComponentLib2\ComponentLib2\bin\Debug\net5.0\DeleteThisasap.dll</HintPath>
    </Reference>
  </ItemGroup>

有人对此有什么想法吗？

【问题讨论】：

Blazor css 隔离以这种方式工作：docs.microsoft.com/en-us/aspnet/core/blazor/components/…

标签： css razor blazor webassembly

【解决方案1】：

在您的 index.html 中添加 [projectname].styles.css - 其中 [projectname] 是您的主要项目。它基于运行时构建：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

其实当你浏览那个 [YourProjectName].styles.css 时，

您将看到包含 CSS 隔离的引用项目中的 bundled.scp.css

@import '_content/[ReferencedProjectName]/[ReferencedProjectName].bundle.scp.css';

【讨论】：

【解决方案2】：

在你的wwwroot/index.html 添加：

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

【讨论】：

【解决方案3】：

我遇到了完全相同的问题，并设法通过将 Razor 组件库发布为 NuGet 包来解决它。然后通过 NuGet 包管理器在 Blazor 服务器端应用程序中安装 Razor 库。通过这样做，我不必引用任何样式表，它会自动将“import”语句添加到应用程序样式表中。（如本文所述https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#razor-class-library-rcl-support-1）

【讨论】：