0

とある教材で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を記述し、確認しましたがインストールされておりませんでした(この確認方法で合っていなかったらすみません)

4
  • 現在、普通のCSSには composes は無いと思いますが、PostCSSなどを使用していますか? 質問者さんが見付けた「ワード自体にエラーが出ないように単に登録する」という回答は、設定の CSS > Lint: Valid Properties に追加するという話ですか? そうだとすると、その解決方法の何が問題となっていますか?
    – mjy
    Commented 2022年8月19日 9:45
  • コメントありがとうございます。 表題の通り通常のCSSではなくCSS Moduleの合成機能のようです。 PostCSSは使用しておりません。 >>質問者さんが見付けた「ワード自体にエラーが出ないように単に登録する」という回答は、設定の CSS > Lint: Valid Properties に追加するという話ですか? おっしゃるとおりの設定に追加する方法です。 その解決方法の問題は ’composes’の機能自体が使用できずに困っておりますので 文字の羅列として処理したいわけではないのです。 教材の情報も念の為加えておきます。 「作って学ぶ Next.js/React Webサイト構築」 book.mynavi.jp/ec/products/detail/id=130848 よろしくお願いいたします。
    – wbwebwb
    Commented 2022年8月19日 10:41
  • なるほど、「composesの機能自体が使用できず」の部分をもう少し説明いただけると、代替案などの回答が得られやすいかも知れないです。入力時に補完が効かない、などの不都合でしょうか。 なお、詳しくないですが、Next.js を使用しているならば、PostCSS が自動で使われているのではないかと思います。
    – mjy
    Commented 2022年8月19日 14:22
  • CSS Modulesにおけるcomposes:はそれより前にあるクラス名のスタイルを取り込み新たなクラス名に+αのスタイルとして使用できます。 質問本文に記載してあるコードを確認いただけると紫色になっているスタイルは有効化されていますが<br /> 記述したcomposes:に関しては灰字となっており有効化されていません。 繰り返しになりますが灰字となっているcomposesをVSCodeで認識させ、有効化したいのです PostCSSに関してですがターミナルでnpm lsを記述し、確認しましたがインストールされておりませんでした(この確認方法で合っていなかったらすみません)
    – wbwebwb
    Commented 2022年8月20日 2:05

1 件の回答 1

1

私もその本を読んでいまして、同じ問題にぶつかりました。
Visual Studio Codeの設定を変更したら解決しました。

詳細、対処法は以下Githubのwikiにあります。ご確認お願いします。
https://github.com/ebisucom/next-react-website/wiki

1

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。