CSS Modules について

こんばんはaokiです。
前回の続きでReactとNext.jsで活用する内容をご紹介します。

CSS Modules

① npmでコマンドを入力、sassインストール

② import  任意の名前  from  “cssのファイルパス”;
上記のコードをファイルに記述することでCSS / SCSSを読み込ませることができます。

③ クラスの記述方法
例)  <div className={ 任意の名前 . box }>
一般的にはclass=””の形でクラス名を指定しますが、className属性を定義することで
スタイルを当てることができます。

注意点

①クラスのオブジェクトに ” – (ハイフン)” がある場合…….
<div className= [ 任意の名前 . box ] >

②クラスが複数個ある場合……
<div className={ ` $ { 任意の名前 . box_1 }  $ { 任意の名前 . box_2 } ` }>

他にもEmotionやTailWind CSSがありますが、今回はカスタマイズ性の高いCSS Moduleについて
ご紹介しました。

クラス関連でのエラーは頻繁に起こると思うので、注意点を意識してみるといいかもしれません。

一週間お疲れ様でした。