React 项目在不暴露所有配置文件的情况下，为项目注入 less 依赖 且 实现 Antd 的按需加载

React 项目在不暴露所有配置文件的情况下，为项目注入 less 依赖 且 实现 Antd 的按需加载

在 上一篇 中，我们实现了通过暴露项目的所有配置文件的方式，使项目支持了 less 样式文件格式 和 Antd 的按需加载，这里我们将讲述 "React 项目在不暴露所有配置文件的情况下，为项目注入 less 依赖 且 实现 Antd 的按需加载"

1. 同样，先加载 less 相关依赖包

   • npm install less less-loader
     

2. 接下来就是这次我们需要的依赖包

   • npm install react-app-rewired customize-cra babel-plugin-import -D
     

3. 修改 package.json 文件

   • // 原文件
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject"
     }
     // 修改后的文件
     "scripts": {
         "start": "react-app-rewired start",
         "build": "react-app-rewired build",
         "test": "react-app-rewired test",
         "eject": "react-scripts eject"
     }
     

4. 然后在项目根目录创建 config-overrides.js 文件

   • const { override, fixBabelImports, addLessLoader } = require('customize-cra');
     
     module.exports = override(
         // 实现 antd 的按需加载
         fixBabelImports('antd', {
             libraryName: 'antd',
             libraryDirectory: 'es',
             /**
             	style: true 表示 less 样式文件格式
             	style: 'css' 表示 css 样式文件格式
             */
             style: true,
         }),
         addLessLoader({
             // true 表示支持 less 样式文件格式
             javascriptEnabled: true, 
         })
     );
     
     

5. 到此为止，操作完成。项目支持 Antd 按需加载，支持 less 样式文件格式