如何在Blazor Server与MAUI混合项目间共享RCL中的全局CSS文件

问题背景 #

作用域CSS文件（*.razor.css）在构建时会自动打包并重写以确保隔离，最终导出为{ASSEMBLY NAME}.bundle.scp.css并关联到对应组件，但Razor类库（RCL）中的非作用域全局CSS文件不会被自动纳入主项目的资源流程，导致主项目通过@import _Content/{ASSEMBLY LIB NAME}/css/...无法引用。

具体解决方案 #

1. 确保RCL的全局CSS被正确发布 #

在LibProj的项目文件（*.csproj）中添加以下配置，保证全局CSS文件被复制到主项目的静态资源目录：

<ItemGroup>
  <Content Update="wwwroot/css/**/*.css">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  </Content>
</ItemGroup>

配置完成后清理项目的bin和obj目录，重新构建解决方案。

2. 在主项目中直接引用RCL的全局CSS #

• Blazor Server项目（BLproj）：在_Host.cshtml的<head>区域添加link标签：

  <link href="_Content/LibProj/css/your-global.css" rel="stylesheet" />
  

• MAUI/Blazor混合项目（MAUIHproj）：在wwwroot/index.html的<head>区域添加相同的link标签。

注意：LibProj需替换为你的RCL实际程序集名称，路径要和RCL中CSS文件的实际位置一致。

3. 使用@import方式引用（需配合第一步配置） #

如果偏好使用@import，在主项目的全局CSS文件（比如wwwroot/css/site.css）中添加：

@import url('_Content/LibProj/css/your-global.css');

补充说明 #

根据官方文档关于CSS隔离的RCL支持内容：

Razor类库支持CSS隔离，类库中的作用域CSS会被打包到程序集的bundle文件中，主项目引用类库时会自动包含这些隔离样式。但类库中的全局CSS不会自动被主项目引用，必须通过手动配置或显式引用的方式纳入。

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