web-dev-qa-db-ja.com

npmパッケージでスタイルをエクスポートおよびインポートする方法は？

反応するコンポーネントがあり、webpackで構築したNPMレジストリにコンポーネントを公開します。私のメインプロジェクトでは、次のようなコンポーネントnpmパッケージJSを使用しました。

Import myComp from 'myComp';

問題は、myCompにもCSSがあり、webpackとExtractTextPlugin（すべてのcssを1つのファイルにビルドする）を使用してdist/index.cssにビルドすることです。

そして、私はこのようなスタイルを消費したい：

Import 'myComp/index.css';

または

Import 'myComp/index';

また、myComp npmパッケージでは、このインポートメソッドをサポートする方法で公開します。

注：node_modulesから直接インポートしたくない

Import '../../../node_modules/myComp/index.css'; // bad

ありがとう！

cssnode.jsnpmwebpackstyles
17
David

だから、思ったよりも簡単です、あなたがする必要があるのは、そのようなCSSをインポートすることです（私は質問でしたように）：

import 'myComp/dist/style.css';

また、ツール（browserify/webpackなど）がcssのjavascriptファイルへの読み込みを処理できることを確認してください。

そのため、問題は構築プロセスにより関連していました。

また、特定のコードをnpmレジストリにプッシュする場合は、package.json内の「ファイル」を使用できます。この方法では、npmレジストリに必要なファイルだけが作成されます。

files: [
"dist/*.css"
]

次のようなツールも使用できます。 https://github.com/rotundasoftware/parcelify -browserifyの場合 https://www.npmjs.com/package/parcelify-loader -ウェブパック用

しかし、私はそれらが好きではありませんでした。 npmパッケージのコンシューマーへの依存を強制します。

12
David