如何将不同的 CSS 文件添加到 blazor 中的不同布局？

Question

嗨，各位 blazor 爱好者！

我有 2 个不同的布局，我想在每个布局上加载不同的 CSS 文件。

第一个是MainLayout.razor，另一个是AdminLayout.razor。

我想在 AdminLayout 中加载我的管理菜单 CSS 文件，而不使用“css 隔离”，因为此布局的 CSS 文件将来可能会有更多文件。

ASP.NET 核心 3.1 或 .NET 5.0

提前致谢。

Answer 1

您可以在 <head> 或 <body> 中的任何位置使用 HTML <link> 标记来包含 CSS，因此删除适当的 <link rel="stylesheet" href="..." /> 分别为 MainLayout.razor 和 AdminLayout.razor。

最终，可能会支持直接从 razor 组件向 <head> 添加内容，如 tracked here。

Answer 2

.Net 3.1 或 .Net 5.0 的解决方案

使用此 java 脚本将 css 文件直接添加到页面或布局：

    function loadCss(cssPath) {
        var ss = document.styleSheets;
        for (var i = 0, max = ss.length; i < max; i++) {
            if (ss[i].href.includes(cssPath.substr(2)))
                return;
        }
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = cssPath;
    
        document.getElementsByTagName("head")[0].appendChild(link);
    }

我创建了一个 js 函数“loadCss”，你必须在 OnAfterRenderAsync 事件上调用这个函数：

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("loadCss", "css/FILENAME.min.css");
    }

如何将不同的 CSS 文件添加到 blazor 中的不同布局？

How to add different CSS files to different layouts in blazor?

asp.net-core

blazor

blazor-client-side

blazor-webassembly