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 interop加载CSS文件。在此答案中找到了要执行的javascript部分：How to load up CSS files using Javascript?