欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 11:32:37
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": "c...

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