这里主要讲解添加less  和  实现Antd按需加载

首选需要执行npm run eject 暴露所有内建的配置 ，这是后面所有配置的基础，这个必须优先执行！

一、实现Antd按需加载

按需加载插件。只需要引入模块即可，无需单独引入样式。

import {Button} from 'antd';ReactDom.render(
     
  
          XXXX  
     
);

 1. 使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。

首先执行以下命令安装 babel-plugin-import

npm install babel-plugin-import --save-dev

1）、修改package.json

"babel": {    "presets": [      "react-app"    ],    "plugins": [      [        "import",        {          "libraryName": "antd",          "style": true        }      ]    ]  }

2）、修改.babelrc

{   "presets": [      "react-app"    ],    "plugins": [      [        "import",        {          "libraryName": "antd",          "style": true        }      ]    ]}

注意： 不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。

二、引入Less

1）安装less-loader 和 less

 

npm install less-loader less --save-dev

2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)

查找 ：exclude

原本的 exclude: [/\.js$/, /\.html$/, /\.json$/],

修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

查找：test: /.css$/

原本的 test: /\.css$/,

修改为 test: /\.(css|less)$/,

在这个test的下面找到use，添加loader

use: [      {...},    {...},    {      loader: require.resolve('less-loader') // compiles Less to CSS    }  ]

 

 参考地址：

https://blog.csdn.net/zhaoyu_m69/article/details/78800887

https://segmentfault.com/a/1190000012881473

https://blog.csdn.net/qq_35809834/article/details/72670220