この記事の目的
typed-css-modules
をインストールし、*.module.css.d.ts
ファイルが自動作成されるようにする。
はじめに
ReactにはCSS modules
という機能があり、これを使用するとコンポーネントとCSSファイルを1対1で紐付けられるようになります。例えば、
export function Sample() { return <div> <h1>hello, world</h1> </div> }
このようなコンポーネントに対して、Sample.module.css
というファイルを作成すると、コンポーネント側ではimport classes from "Sample.module.css"
とすることでコンポーネントのスタイル指定をclassName={classes.container}
などといったようにできるようになります。
本題
はじめにで述べたように、モジュールとスタイルシートを1対1で紐づけることができます。そこからさらに一歩進んで、TypeScriptの型定義ファイルにスタイルのクラスを定義できるようにします。
typed-css-modulesをインポート
まずは必要となるtyped-css-modules
をインポートします。
npm install -g typed-css-modules
次に、インストールしたtyped-css-modules
のコマンドを実行し、*.module.css
ファイルに対する型定義ファイルを作成します。
tcm src
上記のsrc
は*module.css
ファイルが存在するディレクトリを指定します。
ここまでできると、*module.css
ファイルと同じディレクトリに*module.css.d.ts
ファイルが作成されているはずです。
終わりに
上記までの方法だと毎回tsm src
を実行しないといけないので、package.json
のscriptsをうまいこと修正すればいいはず。