Blazor 页面中的不同 css 文件

Question

我想对Blazor 中的不同布局和页面使用不同的 css 文件。因此，我不想将所有 css 文件直接导入 index.html，而是在需要时导入每个页面或布局。

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />

<link href="lib/font-awesome/css/all.min.css" rel="stylesheet" />
<link href="customCss/adminpanle.min.css" rel="stylesheet" />

因此，我在底部添加了 2 个链接，我只想将它们添加到一个布局中，而不是添加到 index.html 文件中。问题是：如何将 css 添加到 blazor 页面（.razor 文件）？

提前致谢！

Answer 1

你可以用我能想到的两种方式来做到这一点：

1. 将标签添加<style></style>到页面组件并将 css 样式放入该标签中。它不会位于单独的文件中。我这样做是为了可以使用需要可变数据的样式选择器。@即使在这种情况下，加载 C# 内容的运算符也可以工作。

2. 通过 javascript 互操作加载 CSS 文件。执行此操作的 javascript 部分可在以下答案中找到： How to load up CSS files using Javascript?