一、react配置Less和按需引入vant组件

Less配置：

????????1、安装第三方插件：npm i react-app-rewired customize-cra -D （通过第三方插件去配置react的启动项，详情查看?react-app-rewired使用_喵巨人笔记 (wmm66.com)

????????2、修改package.json文件 ?“scripts”字段里面的 "start": "react-scripts start" 改为 "start": "react-app-rewired start" （把npm start的指向改变）

????????3、安装less和less-loader：npm i less less-loader@5 -D ?（这里版本不易太高！）

????????4、在根目录下新建文件config-overrides.js文件，文件的内容在↓：

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

module.exports = override(
? //安装完npm i less less-loader@5 -D之后，配置这些，就可以使用Less了
? addLessLoader({
? ? lessOptions: {
? ? ? javascriptEnabled: true,
? ? ? relativeUrls: false,
? ? ? modifyVars: { '@primary-color': '#A80000' },
? ? }
? }),
? // 安装完react-vant之后，配置这些就可以按需引入react-vant组件
? fixBabelImports('react-vant', {
? ? libraryDirectory: "es",
? ? style: true
? }),
)

使用react-vant：

1、安装react-vant：npm i react-vant -S

2、安装好以后，在config-overrides.js文件里面配置，详情查看上面关于react-vant的注释部分

3、进入官网（ React Vant - 轻量、可靠的移动端 React 组件库 (gitee.io)），只需要找到要用的组件，引入即可，如下：
?? ??? ? ? ? ?import { Button } from 'react-vant';?
?? ??? ? ? ? ?<Button type="primary">主要按钮</Button>

注：当然，有很多同学已经查看官网，并且通过第三种——导入所有组件样式的方式，同样能使用，如果不想用Less且不在乎这点性能，直接用下面的方法：react-vant 支持一次性导入所有组件样式。
?? ??? ?import { Button } from 'react-vant';
?? ??? ?import 'react-vant/lib/index.css';

Tips: 引入所有组件样式会增加代码包体积，因此不推荐这种做法。
?? ?