Webpackで.less/.scss参照ファイルをグローバルに公開できますか？

Question

私たちはcssモジュールでWebpackを使用したプロジェクトを持っています。スコープ付きの名前空間を適用するには、各コンポーネントに独自の.lessファイルがあります。私たちが同じように使用できるように、その.lessファイル内では、我々は参照のための私達のcommon.lessファイルをインポートします。

@import (reference) "../global.less"; 
.navbar { 
    .navbar; 
} 

これはかなり複雑なようだが、その構成要素でカプセル化されたクラスのペアリングをもたらし、他の人が開発することができますReactで作業することなく内部的にglobal.lessファイルを作成します。

この問題は、冗長なクラスのラッピングを超えて、この大規模なglobal.lessファイルをインポートする各コンポーネントが、Webpackビルドにほぼ1秒追加されているようです。

global.lessの内容をこれらのファイル内で参照できるようにするメカニズムがあるのではないかと思いますか？私はWebpackがjimモジュールをshimできることを発見しました。私は本質的に.lessまたは.scss相当物を探しています。

Answer 1

commonChunkPluginを追加してglobal.lessパスを追加すると、別のjsファイルで1回のみコンパイルされます。

here