とある教材でWebサイト構築を勉強中なのですが
表題の通り'composes'を記述しても
「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。
教材の完成版のコードを読み込んでも同じエラーが出るので
VSCode上の設定に問題があるのかなとは考えております。
海外のサイトで検索してみても'composes'のワード自体にエラーが出ないように単に登録するような回答くらいしか手に入れられなく……
'composes'を認識させられるような拡張機能などがあるのでしょうか。
どなたかお力をお貸しいただけると助かります。
下記現在記述しているコードになります。
/* 横並び(基本形) */
.sideBySide {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.sideBySide {
flex-direction: row;
justify-content: space-between;
}
}
/* 横並び(中央揃え)*/
.sideBySideCenter {
composes: sideBySide;
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.sideBySideCenter {
text-align: left;
}
}
8/20 11:00追記
CSS Modulesにおけるcomposes:
はそれより前にあるクラス名のスタイルを取り込み新たなクラス名に+αのスタイルとして使用できるようです。
PostCSS
はターミナルでnpm ls
を記述し、確認しましたがインストールされておりませんでした(この確認方法で合っていなかったらすみません)
composes
は無いと思いますが、PostCSSなどを使用していますか? 質問者さんが見付けた「ワード自体にエラーが出ないように単に登録する」という回答は、設定のCSS > Lint: Valid Properties
に追加するという話ですか? そうだとすると、その解決方法の何が問題となっていますか?composes
の機能自体が使用できず」の部分をもう少し説明いただけると、代替案などの回答が得られやすいかも知れないです。入力時に補完が効かない、などの不都合でしょうか。 なお、詳しくないですが、Next.js を使用しているならば、PostCSS が自動で使われているのではないかと思います。composes:
はそれより前にあるクラス名のスタイルを取り込み新たなクラス名に+αのスタイルとして使用できます。 質問本文に記載してあるコードを確認いただけると紫色になっているスタイルは有効化されていますが<br /> 記述したcomposes:
に関しては灰字となっており有効化されていません。 繰り返しになりますが灰字となっているcomposes
をVSCodeで認識させ、有効化したいのです PostCSSに関してですがターミナルでnpm ls
を記述し、確認しましたがインストールされておりませんでした(この確認方法で合っていなかったらすみません)