时间戳

首页 > 解决方案 > Blazor 页面中的不同 css 文件

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

问题描述

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

提前致谢！

标签： single-page-applicationblazor

解决方案

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

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

  2. 通过 javascript 互操作加载 CSS 文件。执行此操作的 javascript 部分可在此答案中找到： 如何使用 Javascript 加载 CSS 文件？

推荐阅读