Vite + react + TypSscript + CSS modules の設定について

スペック
yarn: 1.22.19
react: ^18.2.0
vite:^4.0.0
typescript: ^4.9.3

プロジェクトを始める

yarn create vite my-vue-app --template vue

Shumpei

モジュールをインストール

sass
typed-scss-modules
npm-run-all

package.json の script に以下のnpmスクリプトを登録

"scripts": {
    "dev": "run-p dev:scss vite",
    "vite": "vite",
    "dev:scss": "typed-scss-modules src --watch",
    "build": "tsc && vite build",
    "preview": "vite preview",
  },

最初 scripts に vite を登録してない状態で

run-p vite dev:scss

としたらエラーになったので、ちゃんと scripts 経由で vite コマンドを実行するようにする。

Shumpei

プロジェクトルートに以下のファイルを追加。

typed-scss-modules.config.ts

export const config = {
  exportType: 'default',
  nameFormat: 'none',
  implementation: 'sass',
  additionalData: `@use "./src/styles/variables.scss" as *;`,
  ignore: ["**/variables.scss", "**/variables/**"]
}

参考

additionalData でどの位置からもvariables.scss が呼び出せるようになる。
ただしignore指定をしないと無限ループになってエラーになる。

Shumpei

あとは

yarn run dev

コマンドで自動で *.moule.scss ファイルの更新を検知したら自動で型定義ファイルが生成される。

コンポーネント側でCSSをインポートする時はこのような形で利用する。

App.tsx

import style from './styles/hoge.module.scss'