How do I set up CSS Modules in a React project?

How do I set up CSS Modules in a React project?

To set up CSS Modules in a React project, you need to configure your build tool (like Webpack) to recognize CSS files with the .module.css extension.

What changes do I need to make in my Webpack configuration?

You need to add a rule in your Webpack config to handle .module.css files using the css-loader with the modules option enabled.

Can you show me an example of the Webpack configuration?

Sure! Here's a basic example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

What about using CSS Modules with TypeScript?

For TypeScript, you can create a declaration file (e.g., cssmodules.d.ts) to declare the module types for CSS files.