如何在MAUI项目中正确使用RCL类库？

一、修复CSS隔离失效问题 #

1. 确认RCL组件已启用CSS隔离
   确保RCL中每个需要样式隔离的组件都配有对应的.razor.css文件（比如Component1.razor.css），文件需与组件放在同一目录下。

2. 正确引入RCL的隔离样式文件
   在MAUI Blazor项目的wwwroot/index.html中，仅保留以下引入语句即可（替换为你的RCL名称）：

   <link href="_content/RCL7/RCL7.styles.css" rel="stylesheet" />
   

   删除其他冗余的样式引入，避免路径冲突。

3. 验证RCL项目配置
   检查RCL的.csproj文件，确保包含以下配置（默认自动生成，缺失需手动补充）：

   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
     <RazorLangVersion>7.0</RazorLangVersion>
     <EnableDefaultCssItems>true</EnableDefaultCssItems>
   </PropertyGroup>
   

二、修复静态资源加载失败问题 #

1. 修正组件内静态资源的引用路径
   RCL组件内的静态资源必须以_content/{RCL名称}/作为路径前缀。比如你的background.png若放在RCL的wwwroot根目录，组件代码需修改为：

   <div class="my-component">
       This component is defined in the <strong>RCL7</strong> library.
       <img class="spinner" src="_content/RCL7/background.png" width="64" alt="Loading..." />
   </div>
   

   若资源存放在wwwroot/img目录下，路径则改为_content/RCL7/img/background.png。

2. 验证静态资源的输出配置
   确认RCL中静态资源的“复制到输出目录”属性设置为“如果较新则复制”或“始终复制”，同时检查RCL的.csproj文件包含以下配置：

   <ItemGroup>
     <Content Update="wwwroot/**/*">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       <EmbeddedResource>true</EmbeddedResource>
     </Content>
   </ItemGroup>
   

3. MAUI页面资源引用的路径确认
   你当前MAUI页面中clock.svg的引用路径_content/RCL7/img/clock.svg是正确的，只需确保该资源确实存在于RCL的wwwroot/img目录下即可。

三、额外验证步骤 #

• 清理解决方案并重新生成：右键解决方案选择「清理」，再选择「重新生成」，确保编译产物为最新版本。
• 检查MAUI项目对RCL的引用：确认MAUI项目已正确添加本地RCL项目引用（而非仅依赖NuGet包）。

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