使用 React 组件分发 CSS

Question

我有一个 React 组件 index.js，它在 style.css 中有样式。

我想在 npm 上分发此组件，但我对如何让其他开发人员能够轻松使用该样式感到困惑。

我看到了三个选项：

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

None 这些解决方案满足了我的需求，但让我的组件使用起来很尴尬。我怎样才能分发该组件以便于人们使用它？

Answer 1

让用户选择如何将文件包含在他们的应用程序中。我建议添加到您的 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.

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

Answer 2

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

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

Answer 3

为了扩展 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...）一起工作，无论它们的配置如何。

使用 React 组件分发 CSS

Distribute CSS with a React component

javascript

css

software-distribution

npm

reactjs