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主题色
	}),
);