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按需加載+自定義主題完成，可以重新啓動項目，測試這些功能