Webpack css-loader doesn't load css when the modules option is set to true

Question

I'm trying to import CSS as modules to a react app. I have added this to my webpack.config.js file

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

This is the implementation

app.tsx

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

class App extends React.Component {
  render() {
    return (
      <div className={styles.mainContent}>
        <h1> Hello, World! </h1>
        <Button type="primary">Antd works!</Button>
      </div>
    );
  }
}

styles.module.css

.mainContent {
    color: limegreen;
}

But this CSS class has no effect on the output.

Answer 1

If you want to change the global design of antd you can use a less loader as described in the antd docs for custom theme with webpack config.

If you only want to change the button color you can use plain css. E.g.:

.ant-btn-primary {
  background: red;
  border-color: red;
}

Here is a CodeSandbox with a custom button color.