next.js scssスタイル適応されない

Question

style.scssに書いたスタイルが適応されません。
デベロッパーツールで確認したところ.sectionや.containerに記述スタイルが表示されていませんでした。
section{　padding：16px } のようにsectionだけだと適応されるのですがclassNameを当てた時だけ適応されません。なぜなのでしょうか？
わかる人いましたらご教授お願いしたいです

// style.scss
section {
  .search {
    overflow-y: auto;
    padding: 16px;
  }
  .container {
    padding: 10px;
    overflow: auto;
  }
}

return (
  <>
   <section className="search"></section>
   <section className="container"></section>
  </>
)

Answer 1

sassはインストールしましたか？

npm install sass

https://nextjs.org/docs/basic-features/built-in-css-support#sass-support

Comments

[退会済みユーザー]

installしています

[ug_o]

すみません。質問の意図を理解していませんでした。
おそらくこういうことではないでしょうか？
```
section {
&.search {
overflow-y: auto;
padding: 16px;
}
&.container {
padding: 10px;
overflow: auto;
}
}
```
＆をつけないと子要素として認識されません。

[退会済みユーザー]

返信遅れました！
ありがとうございます！
できました！

scssだと&.をつけないと子要素として適応されないんですね！！

[ug_o]

無事に解決してよかったです！