构建React组件库：如何捆绑css和其他资源？

Question

所以我的理解是，当你分发一个 React 组件供其他人使用时，你应该发布它的编译版本，而不是源代码，并期望最终用户将其集成到他们自己的构建过程中。

这听起来很合理，但我不确定捆绑 css 和其他资产（如图像）的最佳策略。

一种方法是内联，但对于中等大小的任何内容似乎都不鼓励内联。

另一种方法是将 CSS 和图像导入到从库导入组件的文件中。然后最终用户应用程序的构建过程将处理其余的事情。喜欢：

import CoolComponent from 'CoolReactLibrary';
import 'CoolReactLibrary/css/styles.css';
import 'CoolReactLibrary/images/logo.png';

...

这看起来很麻烦，如果我有一个由一堆较小组件组成的组件库，如下所示：

import PrimaryButton from 'CoolReactLibrary/buttons';
import 'CoolReactLibrary/buttons/primary-button/styles.css';

import Card from 'CoolReactLibrary/layout';
import 'CoolReactLibrary/layout/card/styles.css';

import VerticalMenu from 'CoolReactLibrary/menus';
import 'CoolReactLibrary/menus/vertical-navigation/styles.css';

我的偏好是让最终用户这样做：

import PrimaryButton from 'CoolReactLibrary/buttons';
import Card from 'CoolReactLibrary/layout';
import VerticalMenu from 'CoolReactLibrary/menus';

那里的一切都可以正常工作。

有人为此找到一个干净的解决方案吗？