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

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

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

一. 安装使用 antd

1. 安装 antd
yarn add antd@3.26.19

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 组件成功运行起来了。

5. 控制台可能会报一个错误，但是不影响项目运行，可以不用处理。如下
   
   这是因为react默认是严格模式，官网中解释：https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage
   解决方法：
   (1) 升级使用高版本的 antd
   (2) src/index.js 文件删除 React.StrictMode 标签
   

二．antd 高级配置

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

1. 安装 react-app-rewired
yarn add react-app-rewired customize-cra

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

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

   module.exports = function override(config, env) {// do stuff with the webpack config...return config;
   };
   

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

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

2. 修改config-overrides.js 文件

   const { override, fixBabelImports } = require("customize-cra");
   module.exports = override(fixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: "css",})
   );
   

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

自定义主题

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

1. 安装 less
yarn add less less-loader

2. 修改config-overrides.js 文件
   

   const { override, fixBabelImports, addLessLoader } = require("customize-cra");
   module.exports = override(fixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: true,}),addLessLoader({javascriptEnabled: true,modifyVars: { "@primary-color": "#1DA57A" },})
   );
   

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

4. 如果项目启动失败，提示如下错误
   解决方法：
   继续修改 config-overrides.js 文件，使用 lessOptions 对 modifyVars 进行配置，重启项目。

   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": "#1DA57A" },},})
   );
   

   less-loader： https://github.com/webpack-contrib/less-loader#options

5. 如果项目仍启动失败，提示如下错误
   
   解决方法：
   继续修改 config-overrides.js 文件，添加 adjustStyleLoaders 属性，重启项目。

   const {override,fixBabelImports,addLessLoader,adjustStyleLoaders,
   } = require("customize-cra");
   module.exports = override(fixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: true,}),addLessLoader({lessOptions: {javascriptEnabled: true,modifyVars: { "@primary-color": "#1DA57A" },},}),adjustStyleLoaders(({ use: [, , postcss] }) => {const postcssOptions = postcss.options;postcss.options = { postcssOptions };})
   );
   

6. 完美解决，页面正常显示绿色的按钮，配置成功。