LESSとWebpackで角度2スタイルの再利用が可能ですか？

Question

LESSファイルで書かれたスタイルを再利用する方法WebpackのAngular 2アプリでは、

シナリオ：

私は、すべてのコンポーネントのための一般的なスタイル/スタイル変数を含むcommon.lessファイルを持っていると思います。 （例：いくつかのテーマに関連する変数）

次に、これらの共通スタイル/スタイル変数をそこに書き直す必要がないように、コンポーネントのスタイルファイルのそれぞれにcommon.lessファイルをインポートします。

私はWebpackユーザーです。これを試してみると、common.lessファイルの内容がすべてのコンポーネント固有のスタイルファイル（@import 'common.less'）にコピーされてしまい、非効率です。

これを正しく行うにはヘルプが必要です。事前にあなたの助けを感謝します。

Answer 1

.lessファイルをコンポーネントのスタイルに読み込むと、各ファイルが別々にコンパイルされ、これがLESS（SASS）コンパイラの通常の動作です。インポートされたファイルからすべての実際のクラスをレンダリングするときは変更できません。

これを回避する正しい方法は、common.lessファイルをapp.lessやvariables.lessなどの少数のファイルに分割することです。アプリケーションスタイルはルートコンポーネント（通常は 'app.component'などのようなsmth）に含めるだけで、すべての共通クラスが含まれています。

他のコンポーネントのファイルが少ない場合は、変数とミックスインだけを含むvariables.less - ファイルのみをインポートします。これらは最終的なCSSの一部ではなく、実際のレンダリングされたクラスです。

Answer 2

使用@import (reference) "common.less";