React - Ant Design4.x版本安装使用，并按需引入和自定义主题

• 一. 安装使用 antd
• 二．antd 高级配置
• • 安装 craco，对 create-react-app 的默认配置进行自定义
  • 自定义主题
  • 安装 babel-plugin-import ，按需加载组件代码和样式

Ant Design官网：https://4x.ant.design/docs/react/use-with-create-react-app

一. 安装使用 antd

1. 安装 antd
yarn add antd@4.24.3

2. 修改 src/App.css 文件，引入antd/dist/antd.css

   @import '~antd/dist/antd.css';
   

3. 修改 src/App.js 文件，引入 App.css 样式文件，并使用 andt 组件。

   import { Button } from 'antd';
   import './App.css';function App() {return (
   Button
   );
   }export default App;
   

4. 页面正常显示 antd 的蓝色按钮组件，说明已经把 antd 组件成功运行起来了。

二．antd 高级配置

安装 craco，对 create-react-app 的默认配置进行自定义

1. 安装 craco
yarn add @craco/craco

2. 修改 package.json 里的 scripts 属性
   

3. 在项目根目录创建一个 craco.config.js 用于修改默认配置

   /* craco.config.js */
   module.exports = {// ...
   };
   

自定义主题

定制主题： https://4x.ant.design/docs/react/customize-theme-cn

1. 安装 craco-less
yarn add craco-less

2. 修改craco.config.js 文件，配置 lessOptions

   const CracoLessPlugin = require("craco-less");module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {// 自定义less变量modifyVars: { "@primary-color": "#1DA57A" },javascriptEnabled: true,},},},},],
   };
   

3. src/App.css 文件修改为 src/App.less，并修改样式引用为 @import '~antd/dist/antd.less';
   

4. 修改 src/App.js，引用文件为 src/App.less
   

5. yarn start 重启项目访问页面，如果看到一个绿色的按钮就说明配置成功了。

安装 babel-plugin-import ，按需加载组件代码和样式

1. 安装 babel-plugin-import
yarn add babel-plugin-import

2. 修改craco.config.js 文件，配置 babel-plugin-import

   const CracoLessPlugin = require("craco-less");module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {// 自定义less变量modifyVars: { "@primary-color": "#1DA57A" },javascriptEnabled: true,},},},},],// 配置babel-plugin-import按需引用babel: {plugins: [["import", { libraryName: "antd", libraryDirectory: "es", style: true }],["@babel/plugin-proposal-decorators", { legacy: true }],],},
   };
   

3. 移除前面在 src/App.less 里全量添加的@import '~antd/dist/antd.less';，yarn start 重启项目访问页面，antd 组件的 js 和 css 代码都会按需加载。