Ant Design 在 create-react-app 中定制主题具体步骤和遇到的坑

1、安装craco。

$ yarn add @craco/craco

修改 package.json 里的 scripts 属性。

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

2、安装craco-less。

$ yarn add craco-less

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。
配置内容如下：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@primary-color': '#6690dd', // 全局主色
              '@link-color': '#18ffff', // 链接色
              '@success-color': '#52c4ff', // 成功色
              '@warning-color': '#faad14', // 警告色
              '@error-color': '#e30020', // 错误色
              '@font-size-base': '12px', // 主字号
              '@heading-color': '#333333', // 标题色
              '@text-color': '#666666', // 主文本色
              '@text-color-secondary': '#999999', // 次文本色
              '@disabled-color': '#bbbbbb', // 失效色
              '@border-radius-base': '5px', // 组件/浮层圆角
              '@border-color-base': '#e5e5e5', // 边框色
              
            },
            javascriptEnabled: true,
          },
        }
      },
    },
  ],
};

3、使用yarn start 启动项目

如出现编译是提示react-scripts版本过低需要进行升级则返回需要重新安装craco/craco与craco-less
使用如下版本号，本人使用的是 “react-scripts”: “3.4.3” 在启动项目的时候遇到上述提示，使用如下版本号后成功启动：

$ yarn add @craco/craco@5.6.4
$ yarn add craco-less@1.17.1

啦啦啦 然后主题就愉快的定制好啦~~~~~✿✿ヽ(°▽°)ノ✿。
如果帮到你，请给博主一个小心心。

本文地址：https://blog.csdn.net/qq_36639377/article/details/113974735