single-page-application - Blazor 页面中的不同 css 文件

Question

我想在 中为不同的布局和页面使用不同的 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

你可以通过我能想到的两种方式做到这一点:

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

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