CSSにReactコンポーネントを配布する

私はリアクションコンポーネントindex.jsを持っていて、スタイリングはstyle.cssです。CSSにReactコンポーネントを配布する

このコンポーネントをnpmに配布したいのですが、他の開発者がどのようにスタイリングを使いやすくするのか混乱しています。

があり、私が見てきた3つのオプションです：

使用require('./style.css')とバンドル溶液（例えばwebpack、rollup）を有するユーザーに依存しています。私はこのソリューションが気に入らないので、ユーザーが特定のルートを使用してコンポーネントを使用するようになります。
ユーザーに<link rel="stylesheet" href="node_modules/package/style.css" />のスタイルをインポートさせます。私はこのソリューションが気に入らないのは、ユーザーがReactコンポーネントを必要な場所に入れるのではなく、HTMLを変更する必要があるということです。
react-jssなどのプラグインを使用してコンポーネント自体にCSSを挿入します。これは、私のコンポーネントのスタイリングを構成するSCSSファイルが多数あるため、私にとって実行可能な解決策ではありません。

これらのソリューションはいずれも私のニーズを満たしておらず、コンポーネントを使用するのは非常に面倒です。どのようにコンポーネントを配布して、人々が簡単に使用できるようにすることができますか？

2017-02-16 James Monger

ユーザーがアプリケーションにファイルを含める方法を選択できるようにします。私はあなたのREADME.mdに追加することをお勧めしたい：

は、CSSファイルを含めることを忘れないでください！ WebPACKのようなモジュールバンドラでES6を使用して

：
import 'package/dist/style.css'; 
または、昔ながらの信頼性の高いHTMLに：あなたはまた、独自のスタイルを使用することができます
<!DOCTYPE HTML> 
<html> 
<head> 
    ... 
    <link href="node_modules/package/dist/style.css" rel="stylesheet" /> 
    ... 
</head> 
... 
</html> 
。

これは、ほとんどのパッケージで撮影したアプローチです：

出典

2017-02-16 15:41:54

[React-Table]（https://github.com/tannerlinsley/react-table）でも同じことをしています。あなたがそれを含める必要があることをユーザーに知らせる限り、非常にうまく機能します。 – tannerlinsley

nssにcssファイルを含め、それらの代替案を文書化することをお勧めします。

CSSとしてのCSSを使用することを好む者は、スタイルシート
を複製できるツールはGGの答えから高度なバージョンを拡張するには

出典

2017-02-16 15:42:18 timw4mail

を必要としないことができ構築使用することを好む人は、追加することですjsバージョンのcssファイル。

この

import 'package/dist/style.css';

は、ユーザーが必要とするためにはWebPACKのケースではないかもしれない、CSSをロードするように構成されています。たとえば、私は自分のスタイリングニーズにCSSのツールを使用するため、ほとんど行うことはありません。代わりに

あなたはこのような何かに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 ...）の設定にかかわらず。

出典

2017-02-19 00:57:00 Epeli

CSSにReactコンポーネントを配布する

答えて

関連する問題