React中对antd-UI组件库的按需引入+自定义主题的配置

1.安装依赖

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

2.修改package.json

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

3.根目录下创建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' },
						}
					}),
				);

其中fixBabelImports是对antd组件库的按需引入，而modifyVars是对组件主题设置：’@primary-color’是设置组件的主体颜色，antd默认主体颜色是蓝色，而这里设置为了绿色。

最常用的通用样式变量查看这里。

所有样式变量查看这里。

4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css’应该删掉