React Antd主题色更改

1. 安装插件

yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader
注意：
less 和 less-loader的版本最好是

2. 修改package.json文件

将scripts中的start，build，test

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

修改为

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

3. 项目根目录下新建config-overrides.js文件

const {
  override,
  fixBabelImports,
  addLessLoader
} = require('customize-cra');

module.exports = override(
  //写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true //这里一定要写true，css和less都不行哦
  }),
  addLessLoader({
    // javascriptEnabled: true,
    lessOptions: {
      modifyVars: {//需要修改的属性
        "primary-color": "#fc9153",
        'link-color': '#fc9153',
        'text-color': '#666666',
        'error-color': '#db2a36',
        'success-color': '#1b733e',
        'waring-color': '#ffd00b',
        'heading-color': '#272933'
      },
      javascriptEnabled: true,
    }
    //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
  })
)

打开页面就会发现button变成橙色了

这篇文章是我参考的掘金上的一篇如下:https://juejin.im/post/6844904000668581902

我复制使用他的config-overrides.js文件，结果没有作用，原因是modifyVars和javascriptEnabled是lessOptions的以一个属性。

所以可以不妨试试我的方法。

---

忘记说了，当你改变了主题颜色后，需要重启你的服务才可以看见颜色的改变