If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webpack’s css-loader, you’ll see an error: ”TS2307: Cannot find module './styles.css'”.  [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) is a drop-in replacement for css-loader that works with TypeScript and generates typings for CSS on the fly.

You’ll need to install dependencies first:

```
npm install --save-dev css-loader typings-for-css-modules-loader
```

https://app.egghead.io/api/v1/lessons/webpack-import-css-modules-with-typescript-and-webpack/subtitles

Import CSS Modules with TypeScript and webpack

Instructor: [00:00] Using drop typings-for-css-modules-loader in your webpack config the same way as css-loader. You should keep all css-loader options like modules, but instead of css-loader, you should use typings-for-css-modules-loader. NamedExport option will generate typings as namedExport, which are more convenient, and camelCase option will convert class names with dashes to camelCase.

[00:23] Let's use this css file as an example. Note that the class name is in kebab-case, it contains a dash. Let's enter this file to our application. It's OK if you see you cannot find module error.

[00:35] Typings-for-css-modules-loader will generate typings file as soon as we start using styles. Apply our class name to a button. Note that now we're using camelCase class name. With dashes, we would have to use bracket notation, because JavaScript doesn't allow dashes and identifiers.

Import CSS Modules with TypeScript and webpack

Share this video with your friends