前言

為了爬出這個坑，嘗試了百度出來的N多種方法，然而并未奏效。
最后經(jīng)過兩篇文章的綜合測試，成功出坑。
AntD官方傳送

根據(jù)官方文檔配置，跳到高級配置

當(dāng)你不想EJECT拋出配置文件，又想對Create-React-App腳手架生成的框架進(jìn)行自定義配置時候，我們需要對 create-react-app 的默認(rèn)配置進(jìn)行自定義，這里我們使用 react-app-rewired 。
引入 react-app-rewired 并修改 package.json 里的啟動配置。由于新的 react-app-rewired@2.x 版本的關(guān)系，還需要安裝 customize-cra。

$ yarn add react-app-rewired customize-cra less less-loader
//或者使用下面的npm或者cnpm
$ npm install react-app-rewired customize-cra less less-loader -D

使用上面的命令下載相關(guān)包文件。在 package.json 中，需要重新配置script段

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

然后在項目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認(rèn)配置。

module.exports = function override(config, env) {
  // 這里輸入你想配置的所有你所想
  return config;
};

按需引入，精簡開發(fā)和生產(chǎn)模式下的消耗，在引入antD模塊的時候，會自動引用它的樣式

$ yarn add babel-plugin-import
//或者
$ npm install babel-plugin-import -D
// babel-plugin-import是一個用于按需加載組件代碼和樣式的 babel 插件，我們嘗試安裝它并修改 config-overrides.js 文件。

配置上面我們已經(jīng)自定義的 config-overrides.js 文件，并修改寫入

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,  //官方指導(dǎo)style:'css'，但是按需引入很多樣式是less寫的，所以需要改寫成true
    }),
);

自定義主題色

上面我們已經(jīng)做好了按需引入，當(dāng)你需要自定義主題色，還需要配置 config-overrides.js 文件。

引入customize-cra模塊里的addLessLoader，并配置相關(guān)參數(shù)。

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

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