如何使用 CSS 样式的代码拆分构建 UI 组件库

Question

我想创建一个 UI 组件库，消费者可以在其中仅捆绑他们实际使用的组件的样式。

假设这个问题与框架无关，因为我对评估现有方法更感兴趣。

这个想法是让用户能够

import { Button } from '@mylib/ui`

并且不需要去他们的main.ts并添加

import '@mylib/ui/styles/main.min.css`

现在，显然，第一个解决方案是避免将 CSS 捆绑在一起，这样用户就可以为每个组件导入单独的样式表

import '@mylib/ui/styles/button.min.css';
import '@mylib/ui/styles/accordion.min.css';

现在，如果您使用少量组件并希望控制捆绑包大小，这种方法很有效，但如果消费者开始使用许多组件，它就无法扩展。

我怎样才能克服这个挑战？

我能想到的唯一方法是内联样式，由于缺少选择器、媒体查询等原因，这种方法行不通

我想要实现的是一种让消费者声明他们需要什么的方式，并在无需任何额外配置/导入的情况下获取该组件的样式，同时保留仅捆绑属于组件的 CSS 的能力进口

import { Button } from '@mylib/ui`

我正在绞尽脑汁想出这将如何工作的想法......