Watch this lesson on Egghead.
import s from './Button.css';
You’ll get an error: “Cannot find module './Button.css'”. There are several ways to fix that.
The easy way
You can bypass TypeScript import magic by using
require instead of
const s = require('./Button.css');
It’s processed by webpack as usual but you won’t have type check and autocomplete for CSS class names.
The better way
import you need typings for CSS. For example, you have
Button.css like this:
Now you need
Button.css.d.ts like this:
export const foo: string;
export const barBaz: string;
typings-for-css-modules-loader is a drop-in replacement for css-loader that generates typings for CSS on the fly. Let’s install it:
npm install --save-dev typings-for-css-modules-loader
Then update your webpack config:
include: path.join(__dirname, 'src/components'),
Now you can import styles like this:
import * as s from './Button.css';
Type check and autocomplete will work as expected: