reactjs - 当 modules 选项设置为 true 时，Webpack 的 css-loader 不加载 css

我正在尝试将 CSS 作为模块导入到 React 应用中。我已经将其添加到我的 webpack.config.js 文件中

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

这是实现

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

但是这个 CSS 类对输出没有影响。

答案＃1

如果你想改变 antd 的全局设计，你可以使用 less 加载器，正如 antd 文档中关于使用 webpack 配置自定义主题所描述的那样。

如果你只想更改按钮颜色，你可以使用纯 CSS。例如：

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

这是一个带有自定义按钮颜色的 CodeSandbox。

答案＃2

为了避免重复的类名，CSS 模块在编译时会转换类名。

所以你将无法使用 CSS 模块覆盖 CSS 类，因为类名彼此总是不同的。

为了覆盖 CSS 类，你需要使用普通的 CSS，例如。

import './styles.css';

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