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

【问题标题】：Webpack css-loader doesn't load css when the modules option is set to true当 modules 选项设置为 true 时，Webpack css-loader 不加载 css
【发布时间】：2020-07-30 15:17:55
【问题描述】：

我正在尝试将 CSS 作为模块导入到反应应用中。我已将此添加到我的 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 类对 output.

【问题讨论】：

你试过没有options: { modules: true } 声明吗？如果没有该子句，它应该可以正常工作。

标签： reactjs typescript webpack css-loader

【解决方案1】：

如果您想更改 antd 的全局设计，您可以使用 custom theme with webpack config 的 antd 文档中描述的 less 加载器。

如果您只想更改按钮颜色，您可以使用纯 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>
    );
  }
}

【讨论】：