如何将CSS与组件捆绑为npm包?

时间:2019-09-10 21:18:47

标签: reactjs npm webpack components

我正在使React组件库可通过npm下载,是否有一种特定的方式将样式捆绑到包中,而无需最终用户显式导入它们?也许是webpack加载器?

3 个答案:

答案 0 :(得分:2)

首先,您需要在分布式软件包中包含内置的CSS文件。您的webpack构建(以及您的npm发布过程)应该可以做到。

然后,您的库的使用者需要以某种方式在您的应用程序中包含您的css文件(例如:在html头部分中带有链接,或者将其包含在less / scss文件中,或者使用以下命令将其直接导入.js文件中:一些webpack加载程序。

该Webpack不自动包含css文件,因为它不知道它们是必需的。

例如,请参见这些库,必须将其css文件导入js库本身旁边:

https://github.com/Hacker0x01/react-datepicker#installation

https://github.com/react-component/slider#usage

答案 1 :(得分:1)

对于其他寻求答案的人,请查看styled-components

https://styled-components.com/

我们出于多种原因最终选择了js路由中的css,其中一个原因解决了这个问题。

答案 2 :(得分:0)

我建议您查看https://webpack.js.org/guides/asset-management/与此相关的资产管理解决方案。导入时会引发错误,请尝试将程序包下载到另一台计算机或Google Cloud的Cloud Shell实例上,以查看样式表是否将其传递到另一端。如果是,请查看以下问题:Some CSS loaded into React app are not applied