WinForms混合Blazor应用如何动态加载外部RCL组件的打包CSS文件？

因为未被主项目引用的RCL不会自动将静态资源复制到主项目的_content目录，所以需要通过读取嵌入式资源+JS动态注入的方式加载CSS：

1. 配置RCL的CSS为嵌入式资源 #

在RCL项目中，将目标CSS文件的生成操作设置为「嵌入式资源」，也可以直接在RCL的.csproj中添加以下配置：

<ItemGroup>
  <EmbeddedResource Include="wwwroot\css\your-module-styles.css" />
</ItemGroup>

2. 从动态加载的RCL程序集中提取CSS内容 #

加载RCL程序集后，定位并读取嵌入式的CSS资源：

// 已加载的RCL程序集实例
Assembly rclAssembly = Assembly.LoadFrom(module);

// 查找CSS资源名（格式为「RCL命名空间.文件路径」，路径中的/替换为.）
string cssResourceName = rclAssembly.GetManifestResourceNames()
    .FirstOrDefault(name => name.EndsWith("wwwroot.css.your-module-styles.css"));

if (!string.IsNullOrEmpty(cssResourceName))
{
    // 读取CSS文件内容
    using Stream cssStream = rclAssembly.GetManifestResourceStream(cssResourceName);
    using StreamReader reader = new StreamReader(cssStream);
    string cssContent = reader.ReadToEnd();

    // 调用JS函数注入CSS到页面
    await JS.InvokeVoidAsync("injectDynamicCss", cssResourceName, cssContent);
}

3. 实现JS互操作函数注入CSS #

在WinForms Blazor WebView对应的wwwroot/index.html中添加以下JS代码：

window.injectDynamicCss = function(resourceId, cssContent) {
    // 避免重复加载同一CSS
    if (document.getElementById(resourceId)) return;

    // 创建style标签并注入CSS内容
    const styleElement = document.createElement('style');
    styleElement.id = resourceId;
    styleElement.textContent = cssContent;
    document.head.appendChild(styleElement);
}

额外说明 #

• 如果RCL的CSS依赖字体、图片等静态资源，需将这些资源同样设为嵌入式资源，再通过Data URI的方式替换CSS中的资源路径，或通过类似逻辑动态注入资源。
• 若需要卸载模块时清理CSS，可以补充一个JS函数，根据resourceId找到对应的style标签并删除。

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