TypeScript + CSS Modules をWebpackで構築
完成形のプロジェクト
型チェッカー機能によるエラーとWebpackによるビルドエラーを対応する必要がある。
// エラー: モジュール './index.module.css' またはそれに対応する型宣言が見つかりません。
import styles from './index.module.css'
1. 型定義ファイルの作成
TypeScript で拡張子が *.css を扱えるようにグローバルな定義ファイルを作成
style.d.ts
declare module '*.css' {
interface IClassNames {
[className: string]: string
}
const classNames: IClassNames
export = classNames
}
2. webpack.config.jsの作成
※ CSS Modules の部分のみ抜粋
webpack.config.js
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}