webpack4 按需加载Antd以及修改默认主题颜色

用的是create-react-app创建的react项目。首先需要yarn run eject弹出webpack的配置文件。

按需加载

yarn add antd babel-plugin-import -D

先安装antd以及借助babel-plugin-import 插件实现按需加载，安装后修改package.json文件中的babel项目（也可以通过单独的.babelrc文件配置）

在plugins中配置如下：

[ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true } ]

然后重新启动就可以了

yarn start #重启

然后在页面 测试

import { Button } from 'antd' 



Primary

 

看到如下有样式的按钮表示成功：

 

修改主题颜色

因为antd中的样式是用less写的，首先需要安装处理less的包

yarn add less less-loader -D

打开config/webpack.config.js文件：

在module中的rules中项的末尾中添加处理less文件的loader：

通过less的modifyVars项覆盖初始样式：

{ 

	 test: /\.less$/, //include: paths.appSrc, 
	
	 use: [
		{ loader: "style-loader" // creates style nodes from JS strings 
		}, 
		{ loader: "css-loader" // translates CSS into CommonJS 
		}, 
		{ loader: "less-loader",// compiles Less to CSS  
	
			options: {  
			
				sourceMap: true,  
				
				modifyVars: {  
				
					'primary-color': '#FF704F',  
					
					'link-color': '#FF704F', // 'border-radius-base': '2px',  
				},  
				
				javascriptEnabled: true,  
			
			}  
	
		}
	] 
	
}

然后 yarn start 重启即可

【补充】在antd中可以修改的常用的通用变量，所有样式变量可以在 这里 找到。

（参见官网）