antd-design-react官网：Ant Design of React - Ant Design
看官网不同版本的antd按需引入和自定义主题方法都不一样，看了很多的博客，也试验成功了，就在这总结下。
3.xx版本 按需引入
安装antd
npm i antd@3.26.20
安装相应的插件react-app-rewired 和 customize-cra
npm i react-app-rewired customize-cra
安装完之后，在项目的package.json下面，替换相应的代码，使react-app-rewired接管create-react-app
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
}在根目录下面创建config-overrides.js文件，并在文件之中配置：
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);安装babel
npm i babel-plugin-import
完成了按需引入样式的配置，重新启动项目，引入Button组件，可以不引入样式文件。
import React from "react";
import {Button} from "antd";
// import 'antd/dist/reset.css';
function App(props) {
return (
<div>
<Button>按钮</Button>
</div>
)
}
export default App;7.如果启动后出现
在 index.js 文件中，删除 <React.StrictMode> 标签，关闭严格模式，警告就会消失了
自定义主题
安装less和less-loader
npm install less@3.12.2
npm install less-loader@7.1.0
修改config-overrides.js文件配置
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ lessOptions:{
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },//主题颜色
+ }),
+ }
);
有可能会报错
options has an unknown property 'plugins'. These properties are valid:
需要把package.json中"react-scripts"，降级一下。"react-scripts": "4.0.0",
4.xx版本 按需引入
安装antd
npm i antd@4.24.7
安装依赖
npm install @craco/craco
npm install babel-plugin-import
3.修改 package.json 里的 scripts 属性。
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}在根目录下面创建craco.config.js文件，并在文件之中配置：
module.exports = {
babel: {
plugins: [['import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}]],
},
};重启项目
自定义主题
1.安装依赖craco-less
npm install craco-less
2.修改 package.json 里的 scripts 属性。
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}3.修改craco.config.js配置
const CracoLessPlugin = require('craco-less');
module.exports = {
babel: {
plugins: [
['import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css'
+ style: true,
}
]
],
},
+ plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#F04633'},
javascriptEnabled: true
},
},
},
},
+ ],
};
4.重启项目
5.xx版本 按需引入
1.创建项目，安装好antd
2.GitHub - DocSpring/craco-antd：一个将Ant Design与create-react-app一起使用的craco插件
安装craco-antd
npm i -S craco-antd antd
3.根目录创建craco.config.js 文件
加上
const CracoAntDesignPlugin = require("craco-antd");
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }],
};就可以了，把引入的antd.css去掉也可以显示组件
自定义主题
App.js
import React from 'react';
import { ConfigProvider, Button } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
<Button />
</ConfigProvider>
<Button type="primary">Button</Button>
);
export default App
————————————————
版权声明：本文为CSDN博主「努力站桩的奶酪*」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_52528855/article/details/128684252
