React脚手架中配置less-loader和antd按需加载

1.安装antd

npm install antd -S

2.配置less-loader

1. 安装这两个包：npm install react-app-rewired customize-cra -D 作为开发依赖安装
2. 配置react-app-rewired为启动方式： 将package.json中scripts中的react-scripts换为react-app-rewired
3. 安装less-loader npm less-loader -D
4. 在项目根目录中添加config-overrides.js文件 写入：

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

module.exports=override(
  addLessLoader({
    lessOptions:{
      javascriptEnabled:true;
    }
  })
)

报错：

解决： 原因是less-loader版本过高,目前默认安装的是10，重新安装less-loader npm uninstall less-loader
npm i less-loader@5.0.0

3.配置antd按需加载

1. 安装：npm i babel-plugin-import -D
2. 配置config-overrides.js 写入：

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

module.exports=override(
    fixBabelImports('antd',{
        libraryDirectory:'es',
        style:'css',
    }),
  addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
        }
  })
)

3. 就不用再引入antd.css或者antd.less了
4. 只需要import需要的对应组件即可