当模块选项设置为 true 时，Webpack css-loader 不会加载 css

Question

我正在尝试将 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;
}

但是这个CSSclass对 output.

Answer 1

如果你想改变 antd 的全局设计，你可以使用 less 加载器，如 custom theme with webpack config.

的 antd 文档中所述

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

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

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

Answer 2

为了避免重复的 class 名称，css 模块在编译时转换 class 名称。

因此您将无法使用 css 模块覆盖 css classes，因为 class 名称将始终彼此不同。

为了覆盖 css class 你需要使用普通的 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>
    );
  }
}

当模块选项设置为 true 时，Webpack css-loader 不会加载 css

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

typescript

reactjs

webpack

css-loader