antd按需引入+自定义主题

最新推荐文章于 2022-08-02 06:13:18 发布

走_开

最新推荐文章于 2022-08-02 06:13:18 发布

阅读量322

点赞数

文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/believet93/article/details/115228413

版权

本文档详细介绍了如何在React项目中实现Ant Design的按需引入和自定义主题。通过安装相关依赖，修改package.json，以及在根目录创建config-overrides.js文件，你可以轻松管理Antd的样式导入，避免在组件内直接引入antd.css。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装依赖

npm i 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"}
		}
	})
)