search
LoginSignup
11

More than 3 years have passed since last update.

Organization

TypeScriptでCSS modulesを扱う

既存のJavaScript(React)のTypeScript化を進めていて、ハマったのでメモ。

事象

CSS modules部分でfailしてしまう :thinking:

Foo/index.tsx
import React from 'react'
import styles from './index.css'

...
app/javascript/components/Foo/index.tsx:2:20 - error TS2307: モジュール './index.css' が見つかりません

解決策

typed-css-modulestypings-for-css-modules-loader などのpackageを使う手もあったけど、グローバルな定義ファイルを用意してササッと対応することにした。

declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

以上っ :hugging:

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11