react关于antd按需加载的配置和less的配置

1. 更改启动插件

yarn add react-app-rewired customize-cra
npm install react-app-rewired customize-cra

2. 更改package.json文件

package.json -代表没改前的代码，+代表已经更改的代 码

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

3. 在根目录创建一个config-overrides.js用于修改默认配置

4. 执⾏安装 babel-plugin-import插件

yarn add babel-plugin-import

5. 修改config-overrides.js⽂件内容如下

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

到这里antd的按需加载就配置完了，我们只需要重启项目就可以了

下面是less的配置

一、先安装依赖

• npm install customize-cra react-app-rewired less less-loader --save-dev 二、修改config-overrides.js的文件如下，下面是配置了antd按需加载和less的源代码
• less的5.x和6.x版本的引入方式不同，根据自己的需求保留代码

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,
   }),
//less-loader5.x配置
   addLessLoader({
       // true 表示支持 less 样式文件格式
       javascriptEnabled: true, 
   })  
   
//less-loader6.x配置
addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  },
}),