# React UI 组件库

# Ant Design 配置按需引入和自定义主题

以下配置是 3.x 版本，4.x 版本见官网 (opens new window)

安装依赖：

npm install react-app-rewired customize-cra babel-plugin-import less less-loader

修改 package.json

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

1
2
3
4
5
6

根目录下创建 config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports, addLessLoader } = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': 'green' },
    },
  })
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

备注：不用在组件里引入样式，import 'antd/dist/antd.css' 删掉

← react router 5 redux →