Question

我有一个React组件index.js，其样式在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

让用户选择如何在他们的应用中包含该文件。我建议您添加README.md：

不要忘记包含CSS文件！

将ES6与Webpack等模块捆绑器一起使用：
import 'package/dist/style.css';
或者，用普通的可靠HTML：
<!DOCTYPE HTML>
<html>
 <head>
   ...
   <link href="node_modules/package/dist/style.css" rel="stylesheet" />
   ...
 </head>
 ...
</html>
您也可以使用自己的风格。

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

Answer 2

要从GG的答案扩展，高级版本将添加css文件的js版本。

因为这个

import 'package/dist/style.css';

要求用户将Webpack配置为加载css，这可能不是这种情况。例如，我很少这样做，因为我使用css-in-js工具来满足我的样式需求。

相反，如果你将css文件包装成这样的东西：

package/dist/style.js

var insertCss = require('insert-css'); // https://github.com/substack/insert-css
// inline the whole style.css here
insertCss(".YourComponent { color: blue }");

然后用户可以做到

import 'package/dist/style';

它将始终与任何模块加载器（Webpack，Browserify，Rollup ...）一起使用，无论其配置如何。

Answer 3

我建议在npm上包含css文件，并记录这些替代方案。

那些喜欢使用css作为css的人可以复制样式表
那些喜欢使用构建工具的人可以执行要求

使用React组件分发CSS

3 个答案: