Vite で構築された React コンポーネント ライブラリのスタイルを分割または挿入する

Question

現在、Vite を使用するようにコンポーネント ライブラリのビルド ステップを書き直しています。スタイルに問題があります。スタイルは分割されず、1 つの大きな style.css ファイルにバンドルされています。ここで 2 つの疑問が生じます:

• パッケージを別のプロジェクトにインストールするときに、そのパッケージは自動的に組み込まれません。コンポーネントをインポートする場合、style.css は魔法のようにインポートされません。
• 実際には使用していないコンポーネントのスタイルをインポートしています。

以前のセットアップではスタイルインジェクションを使用していました。これは、CSS がコンポーネントにインジェクションされ、したがって分割されることを意味していました。 Vite でも同様のことを実現できますか?

私の現在のビルド設定は次のとおりです:

リーリー

最終的な dist フォルダーは次のようになります (すべての .d.ts ファイルを除外しました):

ご覧のとおり、大きな style.css がありますが、これは私が探しているものではありません。

この問題を解決する方法はありますか?

Answer 1

まだ問題を解決していない場合、私が見つけた最も簡単な方法は、プラグイン vite-plugin-css-injected-by-js を Vite に追加して、生成された CSS を JS に内部化することです。ファイル内にあります。

https://www.npmjs.com/package /vite-plugin-css-injected-by-js

その後、vite 構成ファイルを次のように変更できます:

リーリー