Ant Design的按需引入+自定义主题颜色

最新推荐文章于 2024-08-07 09:33:34 发布

原创最新推荐文章于 2024-08-07 09:33:34 发布 · 954 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#antd #ant-design #react #css

Ant Design 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用React App Rewired自定义webpack配置，实现antd按需加载及主题颜色定制，通过修改package.json脚本及创建config-overrides.js文件来避免手动引入antd样式。

一、安装依赖：

yarn add 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"
	},
....

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