web-dev-qa-db-ja.com

LESS +ネストでcss-modulesを使用できますか？

css-modulesのドキュメント はかなりまばらなので、これができるかどうかはわかりません。

この記事normalおよびerror状態のボタンのスタイルを設定する方法は次のようになります。

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

しかし、私はそれを次のように書きたいと思います：

.common {
    /* font-sizes, padding, border-radius */
    &.normal { /* blue color, light blue background */ }
    &.error { /* red color, light red background */ }
}

この新しいcomposes構文を導入せずに、私がいつも行ってきたように。実際にコードにネストできれば、他のスタイルの上にどのスタイルが構築されているかがより明確になると思います。

しかし、これがcss-modulesによってどのようにエクスポートされるのかわかりませんか？それらが与える唯一の例は、単純なクラス名セレクターです。 .common.normalがどのようにエクスポートされるのか、または.common > .normal ~ .strangeは何なのかわかりません。 css-modulesを使用する場合、基本的にnotのCSSセレクターを使用する必要がありますか？

reactjslesswebpackcss-modules
14
mpen

私もcssモジュールでの使用量を減らしていますが、「＆」を使用している方法がcssモジュールの目標に適合しているとは思いません。私の理解では、「composes」は＆よりも@importに類似しており、疑似クラスに＆を使用しているだけです。

ここにある方法で間違いなく物事を行うことができますが、HTMLで「common」クラスと「normal」クラスの両方を指定する必要があるのは少し奇妙だと思いませんか？私の意見では、「normal」を指定し、「compose」を使用してnormalに共有スタイルを継承させる方がはるかに優れています。

3
mikestaub
.common {
    /* font-sizes, padding, border-radius */
    :global {
        &.normal { /* blue color, light blue background */ }
        &.error { /* red color, light red background */ }
    }
}

それが私の解決策です。 styles.commonを使用する場合、cssは次のようになります。

.ramdomStrings {
    /* I'm not sure if this exists, but it doesn't matter */
}
.ramdomStrings.normal { /* blue color, light blue background */ }
.randomStrings.error { /* red color, light red background */ }
9
Jason Peng

Css-modulesにwebpackローダーを使用している場合は、 postcss ローダーを使用し、さまざまなプラグインを追加して、目的の動作を得ることができます。

たとえば、「 postcss-nested 」プラグインがあり、ネストされたルールを記述できます。

2
Patrick Hübl-Neschkudla