在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文件中。问题是：我如何向Blazor页面（.razor文件）添加CSS？

提前感谢！

- Emba Ayyub

---

你目前有什么进展？请提供代码示例。 - Frank

我编辑了我的问题，希望现在更清楚了。感谢你的回答。 - Emba Ayyub

我需要完全相同的东西。我有一个Blazor应用程序，分为两个部分：管理员和终端用户。每个部分都使用不同的Bootstrap CSS。我正在努力找出如何实现这一点。 - walter33

Answer 1

我能想到两种方法来实现这一点：

1. 在您的页面组件中添加一个 <style></style> 标签，并将 CSS 样式放入该标签。它不会被分离到一个单独的文件中。我曾经这样做过，因为我需要使用需要变量数据的样式选择器。即使在这种情况下，使用 @ 运算符来加载 C# 的内容也是有效的。

2. 通过 javascript 交互加载 CSS 文件。要执行此操作的 javascript 代码可以在以下答案中找到：如何使用 JavaScript 加载 CSS 文件？

- Lee McPherson

---

谢谢你的回答。但是我已经按照朋友的建议在我想要的组件中添加了CSS <link>标签。但这并不是一个很好的解决方案，因为在组件和主要的.html文件中加载CSS时会有延迟。 - Emba Ayyub