CODEWITHSUNDEEP
reactjstypescriptwebpackcss-loader
Heshan Andrews
Heshan Andrews

Reputation: 75

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

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.

Upvotes: 2

Views: 1213

Answers (2)

arslan2012
arslan2012

Reputation: 1028

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>
    );
  }
}

Upvotes: 0

zerocewl
zerocewl

Reputation: 12804

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.

Upvotes: 1

Related Questions