Create React App+typescript+CSS Modulesの環境をつくる

Create React Appで作成したtypescript ReactプロジェクトでCSS Modulesを使えるようにしたので、作業内容のメモを残します。

書籍「りあクト！ TypeScriptで極める現場のReact開発」およびそのサンプルコードを参考にしています。

プラグインのインストール

$ yarn add css-module-types

global.d.tsを作成

CSSファイルをモジュールとして認識するための定義ファイルを作成します。
場所はディレクトリのホーム。

project
...
- build
- src
global.d.ts <- ここに作成

ファイルの内容は以下のとおりです。
※ sassではなくcssを利用する場合適宜読み替えてください。

declare module '*.sass' {
    const exports: {
        [exportName: string]: string
    };
    export = exports
}

tsconfig.jsonの編集

2点追加します。
ひとつめはモジュールの利用、ふたつめはさきほど作成した定義ファイルをプロジェクトに含める設定方法についての追加です。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
+   "plugins": [{"name": "css-module-types"}],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src",
    "downlevelIteration": true
  },
  "include": [
    "src",
+   "global.d.ts"
  ]
}

問題点

現在、私の環境では下記のような警告が出てしまっています。どうすべきかご存じの方、Twitterなどで教えて頂けると助かります。

「りあクト！」シリーズ、おすすめです

いまからReactを学ぶ人はとりあえずこちらを読めば間違いないのではないかなと思います。頼りがいのある先輩に実務でマンツーマンしてもらう体験ができます。