使用React组件分发CSS

Question

使用React组件分发CSS

javascriptcssreactjsnpmsoftware-distribution

4

我有一个React组件index.js，它在style.css中有样式。我想在npm上发布此组件，但我不确定如何使其他开发人员更轻松地使用样式。我看到了三种选项： 1.使用require（'./style.css'）并依赖用户拥有捆绑解决方案（例如webpack，rollup）。我不喜欢这个解决方案，因为它强制用户按照特定的路线使用我的组件。 2.让用户使用<link rel =“ stylesheet”href =“ node_modules / package / style.css”/>导入样式。我不喜欢这个解决方案，因为这意味着我的用户将不得不更改他们的HTML，而不仅仅是在他们想要的位置包含React组件。 3.使用像react-jss这样的插件将CSS放在组件本身中。对于我来说，这不是可行的解决方案，因为我有大量的SCSS文件组成组件的样式。这些解决方案都不符合我的需求，并且使用我的组件会变得相当麻烦。我该如何分发组件，以使使用它变得简单？

- James Monger

3个回答

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等）一起使用，无论它们的配置如何。

- esamatti

0

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

那些喜欢将css作为css使用的人可以复制样式表
那些喜欢使用构建工具的人可以进行require操作

- timw4mail

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GG. · Accepted Answer

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

Don't forget to include the CSS file!

Using ES6 with a module bundler like Webpack:
import 'package/dist/style.css';
Or, in plain old reliable HTML:
<!DOCTYPE HTML>
<html>
 <head>
   ...
   <link href="node_modules/package/dist/style.css" rel="stylesheet" />
   ...
 </head>
 ...
</html>
You can also use your own style.

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