react17+antd4（按需引入+自定义主题）

一、初始项目的package.json 

二、项目中引入ant-design

1. 安装ant-design

npm i antd@4

yarn add antd@4

 2. 使用ant-design

以Button为例，首先在页面中导入antd的Button组件，其次还需要引入ant的样式文件

import React from 'react'

// 1. 首先引入需要使用的组件
import { Button } from 'antd'
// 2. 引入antd 的全局样式
import 'antd/dist/antd.css'

function App() {
    return (
        <div>
            {/* 3. 在组件中使用 */}
            <Button type='primary'>AntDesign-Button</Button>
        </div>
    );
}

export default App

 三、按需引入 ant-design

1. 安装插件

首先需要安装三个插件，分别为 react-app-rewired、 customize-cra 和 babel-plugin-import。

npm i ​react-app-rewired customize-cra babel-plugin-import
或
yarn add react-app-rewired customize-cra babel-plugin-import

2. 修改 package.json

将package.json中的scripts修改为如下所示

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

3. 创建 config-overrides.js

在根目录（src同级目录）创建 config-overrides.js 并添加如下配置

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    })
);

重启项目后就完成了 antd 样式的按需引入

四、自定义主题

1. 安装插件

安装 less、lessloader

npm i less@3.12.2 less-loader@7.0.1
或
yarn add less@3.12.2 less-loader@7.0.1

2. 添加配置

修改前面创建的 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
    }),
    // 添加如下配置、这样 ant-design 的 primary 样式的颜色就会被更改
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {'@primary-color': '#1DA57A'},
        }
    })
);

五、Webpack 版本问题

1. 在进行样式自定义时，出现了webpack的版本问题，大概描述为 需要的webpack版本为 @4.44.2，但是node_modules里的版本为 @5.88.2。

解决方法一：在根目录下创建 .env 文件并写入 SKIP_PREFLIGHT_CHECK=true

解决方法二：直接 npm i webpack@4.44.2。（我也不知道这个方法会不会有什么问题，但我是用这个解决的^_^）