How can I use CSS modules with TypeScript?

How can I use CSS modules with TypeScript?

To use CSS modules with TypeScript, you need to set up your project to recognize CSS module files. First, ensure you have the necessary TypeScript and CSS loader configurations in your build setup.

What configurations do I need in my TypeScript setup?

You need to create a declaration file, typically named cssmodules.d.ts, where you declare the module for CSS files. For example:

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

Do I need to install any specific packages?

Yes, you should install css-loader and style-loader if you're using Webpack. For example:

npm install --save-dev css-loader style-loader

Can I use CSS modules with React?

Absolutely! CSS modules work great with React. Just import your CSS module in your component like this:

import styles from './Component.module.css';