Vite/Rollup 插件：如何将样式（CSS 模块）添加到 React Web 组件中

Question

我正在尝试从 React 创建一个 Web 组件。 Web 组件需要您在 Shadow DOM 中导入样式。因此，虽然我的 CSS 模块通常是这样导入的

import css from "./MyComponent.css"

function MyComponent() {
  return <div className={css.container}>Hello</div>;
}

Web 组件需要额外的步骤。有了Vite，我可以做以下事情

import css from "./MyComponent.css" // this is for the class names
import rawCss from "./MyComponent.css?inline" // this needs to be inside Shadow DOM

function MyComponent() {
  return (
    <>
      <style>{rawCss}</style>
      <div className={css.container}>Hello</div>
    </>
  );
}

这对于简单的组件来说效果很好。但是，对于更复杂的组件，我将导入具有自己的 CSS 等的其他组件。每次都需要这样做会很乏味。

我想知道是否有人知道如何使用 Vite/Rollup 来简化流程。我想让它读取 CSS 模块文件的所有后代文件，然后将它们编译成单个原始 CSS 代码字符串。 我一直在思考如何让 Rollup 为我提供目标文件的导入 ID 列表。特别是，CSS 模块导入，这样我就可以阅读它的内容。

React Web 组件将有一个目标区域来添加该代码字符串。

unction MyComponent() {
  return (
    <>
      <style>{/* vite-plugin-webcomponent:CSSPlaceholder */}</style>
      <div className={css.container}>Hello</div>
    </>
  );
}

Answer 1

这是一个很好的问题，我发现自己也处于类似的发展阶段。虽然我还没有完整的解决方案，但我正在从技术角度探索它，这似乎是与 Vite 配置相关的问题。

虽然我缺乏明确的答案，但我有一个理论想与社区分享。根据多年使用 Webpack 进行 Chrome 扩展开发的经验，CSS 注入的挑战通常可以使用名为“mini-css-extract-plugin”的插件来解决。这个插件将所有 CSS 捆绑到一个文件中，我相信类似的方法在 Vite 中可能是可行的。

此外，我们利用一个名为“react-shadow”版本 16.3.2 的库将样式注入组件的影子根中。我目前正在探索一种无包的方法，因为我熟悉了 Vite 的捆绑流程和 React-Shadow 实现。

潜在的解决方案可能涉及承诺的组合，利用 fetch API 检索扩展中必要的资源并成功填充样式。

最后，我想提一下启发这个答案的一些链接：在单个文件中提取CSS，分配自定义CSS文件名，用于提取CSS并将其存储在单个位置。但是，如果您找到更好的方法，请对此发表评论。