Blazor 页面中的不同 css 文件答案

【问题标题】：Different css files in Blazor pagesBlazor 页面中的不同 css 文件
【发布时间】：2019-10-18 12:00:24
【问题描述】：

我想为 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 文件）？

提前致谢！

【问题讨论】：

到目前为止你有什么？提供代码示例。
我编辑了我的问题，希望现在更清楚。感谢您的回答
我需要完全一样的。我有一个 Blazor 应用程序，包含 2 个部分：Admin 和 EndUser。每个部分都使用不同的引导 css。我正在努力弄清楚如何实现这一目标。

标签： single-page-application blazor

【解决方案1】：

我能想到的方法有两种：

将<style></style> 标签添加到您的页面组件，并将您的css 样式放入该标签中。它不会在单独的文件中。我已经这样做了，所以我可以使用需要可变数据的样式选择器。即使在这种情况下，在 C# 中加载的 @ 运算符也可以工作。
通过 javascript 互操作加载 CSS 文件。执行此操作的 javascript 部分可在此答案中找到：How to load up CSS files using Javascript?

【讨论】：

感谢您的回答。但是我已经在朋友的建议下将 css 标签添加到我想要的组件中。但这并不是一个好的解决方案，因为在组件和主 .html 文件中加载 css 期间存在延迟。