使用React组件分发CSS

Question

使用React组件分发CSS

Jam*_*ger 4 javascript css software-distribution npm reactjs

我有一个index.js具有样式的React组件style.css.

我想分发这个组件npm,但我很困惑我如何让其他开发人员轻松使用样式.

我看到有三种选择:

使用require('./style.css')和依赖于其捆绑解决方案的用户(例如webpack,rollup).我不喜欢这个解决方案,因为它迫使用户沿着某个路线使用我的组件.
让用户导入样式<link rel="stylesheet" href="node_modules/package/style.css" />.我不喜欢这个解决方案,因为这意味着我的用户必须对他们的HTML进行更改,而不是仅仅将React组件包含在他们想要的地方.
使用react-jss等插件将CSS放入组件本身.这对我来说不是一个可行的解决方案,因为我有大量的SCSS文件构成了我的组件的样式.

这些解决方案都不能满足我的需求,并且使用我的组件非常尴尬.如何分发组件以便人们可以轻松使用它？

Answer 1

GG.*_*GG. 8

让用户选择如何在他们的应用中包含该文件.我建议你加入README.md:

别忘了包含CSS文件!

将ES6与Webpack等模块捆绑器一起使用:
import 'package/dist/style.css';
Run Code Online (Sandbox Code Playgroud)
或者,在普通的可靠HTML中:
<!DOCTYPE HTML>
<html>
 <head>
   ...
   <link href="node_modules/package/dist/style.css" rel="stylesheet" />
   ...
 </head>
 ...
</html>
Run Code Online (Sandbox Code Playgroud)
您也可以使用自己的风格.

这是大多数软件包采用的方法:

归档时间：	8 年，9 月前
查看次数：	1006 次
最近记录：	8 年，1 月前