create-react-app脚手架创建react项目，引入less支持+antd按需加载+自定义主题的两种方式

因为antd的css是根据less来开发的，虽然可以以引入css的方式来使用，但是这样不能修改antd主题，可能会有些不方便，想要修改antd的主题就需要使用 less 变量覆盖功能，另外以这种方式引入css是直接把整个antd的css全部引入，例如，我只是用了一个Button，但是引入了全部的css样式，这样就会稍微的影响前端性能，为解决这个问题是需要使用按需加载（antd的css）

第一种就是按照官网上的使用react-app-rewired 来进行处理，如下：

1、引入less支持，修改antd主题，以及按需加载样式，需要使用以下依赖包：

react-app-rewired   、customize-cra、  babel-plugin-import、 less 、  less-loader

安装依赖包命令 :

yarn add babel-plugin-import react-app-rewired customize-cra less less-loader

如果使用网络不好，或者使用yarn太慢，可以用手机开一个热点进行安装或者使用cnpm（淘宝镜像），先安装淘宝镜像，命令是：

npm install -g cnpm --registry=https://registry.npm.taobao.org

再使用cnpm进行安装：

cnpm install --save babel-plugin-import react-app-rewired customize-cra less less-loader

2、修改package.json，使用react-app-rewired替换react-scripts，

/* 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 用于修改默认配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4、实现按需加载， 修改新创建的文件config-overrides.js

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

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

5、自定义antd主题，修改config-overrides.js

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  }),
);

到此引入less支持+antd按需加载+自定义主题完成，可以重新启动项目，测试这些功能

第二种方式，是向外暴露webpack配置文件

默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可：

yarn eject

这种方法只需要安装三种依赖包babel-plugin-import、 less 、  less-loader

yarn add babel-plugin-import less less-loader

1、添加antd库的样式（webpack.config.js）

在这个位置，添加如下

2、复制代码修改配置环境（webpack.config.js） 定义全局变量

3、复制代码配置less-loader

复制这一块进行修改

修改为如下：

4、复制代码定义全局样式：

代码如下：

// if (preProcessor) {
    //   loaders.push(
    //     {
    //       loader: require.resolve('resolve-url-loader'),
    //       options: {
    //         sourceMap: isEnvProduction && shouldUseSourceMap,
    //       },
    //     },
    //     {
    //       loader: require.resolve(preProcessor),
    //       options: {
    //         sourceMap: true,
    //       },
    //     }
    //   );
    // }
    if (preProcessor) {
      let loader = require.resolve(preProcessor)
      if (preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: { //自定义主题
              'primary-color': ' #1DA57A ',
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }

到此第二种方案引入less支持+antd按需加载+自定义主题完成，可以重新启动项目，测试这些功能