react项目：引入antd以及自定义antd主题

antd文档
https://ant.design/docs/react/use-with-create-react-app-cn
下载组件库包

yarn add antd

实现组件的按需打包
1.下载依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

2.定义加载配置的js模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);

3.修改配置: package.json

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

4.在应用中使用antd 组件

import React, {Component} from 'react'
import {Button, message} from 'antd'
class App extends Component {
	handleClick = () => {
		message.success('使用antd 组件');
	}
	render() {
		return (
			<Button type='primary' onClick={this.handleClick}>react</Button>
				)
		}
}
export default App

自定义antd 主题

下载工具包:
yarn add less less-loader
修改config-overrides.js

const {override, fixBabelImports, addLessLoader} = require('customize-cra');
module.exports = override(
	fixBabelImports('import', {
	libraryName: 'antd',
	libraryDirectory: 'es',
	style: true,
}),
addLessLoader({
	javascriptEnabled: true,
	modifyVars: {'@primary-color': '#1DA57A'}, //自定义antd主题色
	}),
);