reactjs - Webpack css-loader nenačíta CSS, keď je možnosť modules nastavená na true

Snažím sa importovať CSS ako moduly do React aplikácie. Pridal som toto do svojho súboru webpack.config.js

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

Toto je implementácia

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

Ale táto CSS trieda nemá žiadny vplyv na výstup.

Odpoveď č. 1

Ak chcete zmeniť globálny dizajn antd, môžete použiť less loader, ako je popísané v dokumentácii antd pre vlastnú tému s konfiguráciou webpacku.

Ak chcete zmeniť len farbu tlačidla, môžete použiť obyčajný CSS. Napr.:

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

Tu je CodeSandbox s vlastnou farbou tlačidla.

Odpoveď č. 2

Aby sa predišlo duplicitným názvom tried, CSS modul transformuje názvy tried pri kompilácii.

takže nebudete môcť prepísať triedy CSS pomocou CSS modulov, pretože názvy tried budú vždy odlišné od seba navzájom.

Aby ste mohli prepísať CSS triedu, musíte použiť čisté CSS, napríklad.

import './styles.css';

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