如何通过NPM分发CSS

Question

我正试图将我的单体React应用程序分解为可重用的部分，以便与其他项目共享。

我想将一些通用组件（例如Button，Header，Dropdown等）提取到我自己的小UI库中。我遇到的问题是如何管理CSS。现在，我的应用只有一个样式表，可以处理所有事情。

这些是我所见过的解决方案：

1. 为组件本身（JS中的CSS）嵌入JS中每个组件的CSS样式。
2. import或require组件JS中的CSS文件，并使用webpack为您捆绑CSS文件。

我真的不喜欢这两种选择。我了解将样式与组件并置在一起的吸引力，但是我觉得：a）混乱了组件的定义，并且b）与CSS的工作方式作斗争（由于所有范围都非常狭窄，因此不再利用层叠样式）到单个组件）。

而且，我无法进入import CSS文件。真是太不对劲了。那时我们甚至不再编写JavaScript。

我意识到这些并不是完全流行的意见，但是从NPM模块中获得一个好的老式CSS文件（我可以直接放入HTML并使用）时，我缺少第三个选项吗？理想情况下，不涉及从node_modules复制/粘贴。 ：）

Answer 1

感谢@EmileBergeron的提示，我找到了PostCSS import plugin。它可以在node_modules和您自己的代码中查找和内嵌样式表。

所以，我的工作流程将是：

1. npm install my-ui-library
2. 将要使用的React组件导入JS文件import { Button } from 'my-ui-library'
3. 将相应的样式表导入CSS文件@import 'my-ui-library/Button.css'

这样，我将CSS导入CSS并将JS导入JS，这对我来说自然而然。对于所有组件仅使用一个样式表，而不是将其按组件拆分也可能是有道理的，但这是我以后可以知道的细节。

然后，我只需要在构建系统中添加PostCSS即可内联所有在测试中非常简单的内容。