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