[Webpack + React] Import CSS Modules with TypeScript and webpack

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 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

 

Webpack:

...
{
                test: /\.css$/,
                include: path.join(__dirname, 'src'),
                use: [
                    'style-loader',
                    {
                        loader: 'typings-for-css-modules-loader',
                        options: {
                            modules: true,
                            namedExport: true,
                            camelCase: true,
                        },
                    },
                ],
            },
...

 

css:

.salmon-button {
    padding: 0.5em 1em;
    background: snow;
    color: salmon;
    border: 1px solid salmon;
    border-radius: 3px;
    font-size: 1.6em;
    font-weight: bold;
}

 

js:

With camelCase turned on in Webpack, we can do:

import * as styles from './index.css';

const html = `<button class=${styles.salmonButton}>Click me!</button>`;
document.getElementById('app').innerHTML = html;

Instead of:

styles['salmon-button']