reactjs - Webpack css-loader tidak memuat css ketika opsi modules diatur ke true

Saya mencoba mengimpor CSS sebagai modul ke aplikasi React. Saya telah menambahkan ini ke file webpack.config.js saya

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

Ini adalah implementasinya

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

Tetapi kelas CSS ini tidak berpengaruh pada keluaran.

Jawaban #1

Jika Anda ingin mengubah desain global antd, Anda dapat menggunakan less loader seperti yang dijelaskan dalam dokumen antd untuk tema kustom dengan konfigurasi webpack.

Jika Anda hanya ingin mengubah warna tombol, Anda bisa menggunakan CSS biasa. Misalnya:

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

Berikut adalah CodeSandbox dengan warna tombol kustom.

Jawaban #2

untuk menghindari nama kelas yang duplikat, modul css mengubah nama kelas saat kompilasi.

jadi Anda tidak akan bisa menimpa kelas css menggunakan modul css, karena nama kelas akan selalu berbeda satu sama lain.

untuk mengesampingkan kelas css Anda perlu menggunakan css biasa, misalnya.

import './styles.css';

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