在上篇文章中我們簡單介紹了Ant Design元件的使用，但是在使用過程中我們在樣式檔案中直接載入了全部的Antd樣式檔案，這對於前端頁面來說並不符合其開發要求，接下來我們介紹css樣式檔案的按需載入。

1 首先，我們需要在專案檔案中安裝自定義配置的工具。在專案資料夾中開啟命令列工具，輸入“npm install react-app-rewired --save”，如圖：

2 然後修改package.json檔案中的配置，如圖：

3 修改完配置後在專案的根目錄下新建一個名為“config-overrides.js”檔案，先不要在此檔案中新增任何程式碼，放置在此處。

4 然後安裝按需載入元件程式碼和樣式的babel外掛。在命令列中輸入“npm install babel-plugin-import --save”如圖：

5 最後，在剛才新建的js檔案中新增如下的程式碼，如圖：

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(
        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
    );
    return config;
};

6 我們刪除之前在index.css檔案頭部新增的“@import '~antd/dist/antd.css';”這行程式碼，重新啟動專案。如圖：

7 此時，按需載入環境已經配好，我們需要元件時，只需在相關檔案中引入此元件的包，然後例項化此元件即可。例如，我們在主頁元件中新增一個卡片，我們只需引入Card的包，然後貼上官網程式碼即可，並不需要在引入css樣式那些，因為在引入的包中自帶了樣式程式碼，並且僅僅自帶了卡片的樣式程式碼，這就是按需載入，大大降低了瀏覽器的承載力，如圖：