Angular宿主应用中React组件CSS模块导入兼容方案求助

背景 #

我现在在Angular项目里集成一堆遗留的React组件，用的是把React组件转为可嵌入Web Component的思路。这些React组件都遵循"组件自负责样式"的原则，通过JS模块导入对应CSS：

import "./Admin.css";

这种方式本来非常省心，如果Angular这边的编译器能像React项目里那样正常识别这种导入，那就是最完美的结果了。

遇到的问题 #

但现实是，在Angular宿主环境里，React组件里这种import "./Admin.css"的写法会直接触发编译报错：

X [ERROR] Could not resolve "./Admin.css"

src/app/components/react/Admin/Admin.tsx:3:7:
  3 │ import "./Admin.css";
    ╵        ~~~~~~~~~~~~~

没办法，我只能换一种方式：在Angular宿主组件的.scss文件里用@import引入React组件的样式：

// Inside AdminHost.component.scss
@import '../../react/Admin/Admin';

这就带来了更大的麻烦——原来React组件"自管自样式"的优势完全丧失了！我得手动遍历Admin.tsx的所有子组件，把它们的样式也一个个@import进来，子组件的子组件也要照此操作。而且如果一个组件被多个父组件引用，每次都得重复这个遍历过程，除非我能记全它依赖的所有样式。项目里组件数量特别多，这种手动树遍历的工作量实在让人崩溃。

尝试过的方案1：动态注入样式 #

我试过写个工具函数来动态导入CSS：

// sanitizer是Angular宿主注入的
export function importCss(cssUrl: string, sanitizer: DomSanitizer) {
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = sanitizer.sanitize(SecurityContext.URL, cssUrl);
  head.appendChild(style);
}

// 在Admin.tsx里调用：
importCss("path/to/Admin.css");

但你肯定也发现问题了：这里的cssUrl必须是URL，不能用相对文件路径。也就是说我不能再用import "./Admin.css"这种直观的写法了，得把Admin.css放到静态资源文件夹里。我研究了下，这么做根本没减少多少工作量，就放弃了。

尝试过的方案2：约定式样式导入 #

我现在在用一套约定规则，每次迁移React组件的时候都严格遵守：

1. 把最顶层React组件的样式导入到Angular宿主组件的.scss里；
2. 每个React组件在同目录下要有一个同名的样式文件；
3. 如果组件有子组件，就在自己的.scss里直接导入子组件的样式，每层只负责自己的样式和下一层的样式导入；
4. 原来的React样式都是.css文件，等我把某个组件及其所有子组件的样式都处理完，就把.css改成.scss。这样以后别的组件引用它的时候，直接导入这一个.scss就行，不用再去遍历它的子组件找样式了。

这个方法确实减少了不少重复工作，但还是不够——手动遍历组件树的痛苦依然存在，我总觉得应该有更高效的办法。

一些思路，求大家指点 #

我脑子里有几个方向，但都还没落地，想问问有没有大佬能帮忙：

1. 最优解方向：能不能让Angular的编译器识别React组件里的import "./Admin.css"写法，像React项目里那样正常处理？我自己试了好多次都没成功（我猜是Angular编译器的限制，毕竟React里完全没问题）。
2. 写个Bash脚本把所有样式文件都复制到静态资源文件夹里，这样方案1的动态注入就能用了。但缺点是样式文件和组件分开存放，找起来麻烦；而且有些样式文件名重复，得复制整个目录结构过去，这对我的Bash水平来说有点挑战。
3. 有没有办法把CSS文件导入成Blob，转成Data URL之后再用link标签注入？这样方案1就能用相对路径了，但我不知道具体怎么实现。

备注：内容来源于stack exchange，提问作者Justin Morgan