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.

Have you tried this without the options: { modules: true } statement? It should work fine as is without that clause. — Seth Lutske
– Seth Lutske, Commented Jul 30, 2020 at 15:24

zerocewl · Accepted Answer · 2020-07-31 06:15:14Z

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.

answered Jul 31, 2020 at 6:15

zerocewl

12.9k8 gold badges34 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arslan2012 · Accepted Answer · 2020-07-31 06:27:32Z

0

to avoid duplicated class names, css module transforms the class names at compilation.

so you will not be able to override css classes using css modules, because the class names will always be different from each other.

in order to override css class you need to use plain css, eg.

import './styles.css';

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

answered Jul 31, 2020 at 6:27

arslan2012

1,0287 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related