● 1. css module を使用する

sample.module.css

.btnRed {
    background-color: red;
    color: white;
}

コンポーネントでの使用

import styles from "@/styles/common.module.css";

return (
    <button className={styles.btnRed}>ボタン</button>
)

● 2. css module で scssを使用する

・sass のインストール

npm i sass -D

あとはファイル名を sample.module.scss のように拡張子 .scss にするだけです。

● 3. Typescript で css module の scssを使用する

コンポーネントでの使用

import styles from "@/styles/common.module.css";

return (
    // 存在しないクラス .hogehoge でエラーが出ない
    <button className={styles.hogehoge}>ボタン</button>
)

・css modules に 型をつける typed-scss-modulesのインストール

typed-scss-modulesのインストール

npm i typed-scss-modules -D

vi typed-scss-modules.config.ts

以下の内容で保存します

export const config = {
  exportType: 'default',
  nameFormat: 'none',
  implementation: 'sass'
}

型生成コマンド

npx typed-scss-modules src

・Commandクリックで css modules に ジャンプできる happy-css-modules のインストール

happy-css-modules のインストール

npm i -D happy-css-modules

型生成コマンド

npx hcm 'src/**/*.module.{css,scss,less}'