如何在 Create-React-App 中修改 Ant Design 主题样式

前端

2023-10-07 06:16:17

缘起

在使用 Create-React-App 创建项目时，为了自定义 Ant Design 的主题样式，我们需要用到 eject 命令。

准备工作

在继续之前，请确保你已经完成了以下操作：

安装了 Create-React-App 和 Ant Design。
通过 npm run eject 命令暴露了 webpack 配置。

修改主题样式

首先，你需要在项目根目录中创建一个名为 config/webpack.config.js 的文件，并在其中添加以下内容：

const path = require('path');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
            },
          },
        ],
      },
    ],
  },
  // ...
};

然后，你需要在项目根目录中创建一个名为 src/styles/antd.less 的文件，并在其中添加以下内容：

// 这里你可以自定义 Ant Design 的主题样式
@import '~antd/lib/style/themes/default.less';

最后，你需要在项目的 package.json 文件中添加以下内容：

{
  // ...
  "scripts": {
    // ...
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  // ...
}