How do I use CSS Modules in Webpack?

How do I use CSS Modules in Webpack?

To use CSS Modules in Webpack, you need to configure your Webpack setup to handle CSS files with the appropriate loader.

What loader do I need for CSS Modules?

You need to use css-loader with the modules option enabled. You can install it using npm or yarn.

Can you show me a sample Webpack configuration?

Sure! Here's a basic example:

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

How do I import a CSS Module in my component?

You can import a CSS Module like this:

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

Then, you can use the styles in your component.