TypeScript + CSS Modules をWebpackで構築

完成形のプロジェクト

https://github.com/asano-yuki/typescript-cssmodules

型チェッカー機能によるエラーと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
      }
    }
  ]
}