項目中引入Ant Design

一、安裝antd

npm install antd      

二、實作antd的按需打包

• 為什麼要實作按需打包？

• • 因為直接引入antd，會引入很多我們不需要的包，造成空間上的浪費。

1. 引入相關工具包

npm install react-app-rewired customize-cra babel-plugin-import      

1. 在項目根目錄下建立一個配置檔案（config-overrides.js）

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

1. 修改package.json

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

三、實作antd自定義主題

1. 下載下傳工具包

npm install less less-loader
npm install [email protected] --save-dev      

1. 修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': 'aqua' },
        }
    }),
);      

1. 下面的這句代碼要注釋掉