使用.NET Core 6.0 CSS Isolation时@import规则报错，求解决方法

你遇到的RZ5000错误是因为CSS隔离文件（如[组件名].razor.css）不支持@import规则——官方明确限制了这一点，原因是作用域样式的加载顺序无法保证，@import会导致样式加载不可控。下面是几种可行的解决办法：

方法1：将@import移到全局CSS文件 #

把字体引入的@import语句放到项目的全局样式文件中（比如wwwroot/css/site.css），全局CSS不受隔离规则限制，且会优先加载，能确保字体全局生效：

/* 放到wwwroot/css/site.css的顶部 */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

之后你可以在隔离CSS文件中正常使用这些字体，样式隔离特性不受影响。

方法2：在布局文件中用<link>标签直接引入 #

如果不想修改全局CSS，也可以在项目的布局文件（如Pages/_Layout.cshtml或Shared/MainLayout.razor）的<head>区域添加<link>标签引入字体，同样能全局生效：

<!-- 在<head>内添加 -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

方法3：组件内动态引入（不推荐） #

如果特殊场景下需要在单个组件内控制字体加载，可以通过注入IJSRuntime动态添加<link>标签，但这种方式需要处理重复加载的问题，不如前两种简便：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnInitializedAsync()
    {
        // 检查Playfair Display字体链接是否已存在
        var playfairExists = await JSRuntime.InvokeAsync<bool>(@"
            () => document.querySelector('link[href=""https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i""]') !== null
        ");
        
        if (!playfairExists)
        {
            await JSRuntime.InvokeVoidAsync(@"
                () => {
                    const link = document.createElement('link');
                    link.href = 'https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i';
                    link.rel = 'stylesheet';
                    document.head.appendChild(link);
                }
            ");
        }

        // 检查Open Sans字体链接是否已存在并添加
        var openSansExists = await JSRuntime.InvokeAsync<bool>(@"
            () => document.querySelector('link[href=""https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i""]') !== null
        ");
        
        if (!openSansExists)
        {
            await JSRuntime.InvokeVoidAsync(@"
                () => {
                    const link = document.createElement('link');
                    link.href = 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
                    link.rel = 'stylesheet';
                    document.head.appendChild(link);
                }
            ");
        }
    }
}

总结 #

优先选择前两种方法，因为字体属于全局资源，全局或布局层面引入是最合理的，既避免了隔离规则限制，又能保证加载顺序可控。

内容的提问来源于stack exchange，提问作者Deaglan