2017-03-21 4 views
0

WebpackでCSSモジュールを使用するときにlocalIdentNameを変更して、複数のクラス名を適用することはできますか?CSSモジュール複数localIdentName

component-local hash:最終的に適用されますクラス名がある

css?modules&localIdentName=[[name]-[local] [hash]]

私の究極の目標は、このような何かを行うことです。

なぜなら、すべてのビルドを変更するハッシュを使用せずに自分のCSSスタイルをグローバルに上書きしたい人に、わかりやすい人間が読めるクラス名を公開しながらCSSを安全に適用できるからです。

答えて

0

複数のクラス名を使用することはできません。 CSSクラスに複数の名前を付けるのは意味がありません。要素に複数のクラスを適用するだけです。素敵な名前をつけたい場合は、[hash]localIdentNameに含めないでください。この構成では例えば

.my-class {} 

css-loader?modules&localIdentName=[name]-[local] 

filename.cssはなります:

.filename-my-class {} 

また、ハッシュの文字数を指定することができるはず追加される。たとえば、[hash:4]は、ハッシュの最初の4文字だけを名前に追加します(それが許容できる中間地である場合)。

+0

要素に複数のクラスを適用することは、まさに私がやりたいことです。これはライブラリ用であり、ハッシュを使用してコンポーネントにスタイルを適用してカプセル化され、グローバルに影響を受けないようにしたいのですが、ライブラリを使用してスタイルをオーバーライドしてハッシュを使用する必要がないようにしますすべてのビルドを変更することができます。 –

+0

ライブラリの場合は、 '.mylibrary-component-class'のように、競合しない名前を使用してください。オーバーライドオプションを提供するときに、ユーザークラスと衝突しないようにする必要があります。または、Sassを使用して、オーバーライド可能な変数を提供することもできます。しかし、2つのクラスを持つことを主張する場合は、CSSモジュールを使用してクラス名を手動で文字列として追加します。 –