React項目中antd的按需引入與自定義主題

一.React中使用antd

1.下載antd包

   npm i antd -S

2.按需引入

//App.jsx文件
import {Button} from 'antd' //引入按鈕組件
import {WechatOutlined, ShoppingCartOutlined } from '@ant-design/icons'; //icon圖標庫需要另外引入
import 'antd/dist/antd.css' //引入antd的所有樣式

3.使用組件

 1 export default class App extends Component {
 2     state = {
 3         size: 'large',
 4     };
 5 
 6     render() {
 7         return (
 8             <div>
 9                 App...
10                 <Button type="primary">Primary Button</Button>
11                 <button>點我</button>
12                 <Button type="primary" icon="search">
13                     Search
14                 </Button>
15                 <Button icon="search">Search</Button>
16                 <WechatOutlined />
17                 <Button type="primary" icon="download" size={this.state.size}>
18                 Download
19                 </Button>
20                 <ShoppingCartOutlined />
21           </div>
22         )
23     }
24 }

4.效果

 

 

二.修改react默認配置

 打開一個react項目，我們看到的 create-react-app 生成的默認目錄結構如下

 

 沒有webpack.config.js配置文件，因爲項目爲了防止我們胡亂修改導致項目崩潰，幫我們隱藏了。如果我們想要修改webpack.config.js文件該如何呢？

方法一：

直接執行 npm run eject

但是這樣操作是不可逆的，對於熟悉webpack配置的人來說，可以隨意按照自己的需求修改配置，可以這樣操作，但是對於不瞭解webpack的小夥伴建議看第二種方法。

方法二：

1 下載react-app-rewired 和 customize-cra

yarn add react-app-rewired customize-cra
或者
npm i  react-app-rewired customize-cra

其中customize-cra 用於執行 config-overrides.js中的修改規則

 當customize-cra修改config-overrides.js中的規則時，需要react-app-rewired 用於使用新規則（react-app-rewired 替換 react-scripts）啓動腳手架，此時需要重新配置package.json文件（見第3步驟）

2.在項目根目錄創建一個 config-overrides.js 用於修改默認配置。

 

1 //config-overrides.js
2 module.exports = function override(config, env) {
3   // do stuff with the webpack config...
4   return config;
5 };

 

在這個文件的方法中可以修改webpack配置，又不會破壞react項目的原有配置

3.修改package.json文件

1  "scripts": {
2     "start": "react-app-rewired start",
3     "build": "react-app-rewired build",
4     "test": "react-app-rewired test",
5     "eject": "react-scripts eject"
6   },

4.重新啓動項目，配置即可生效

 

三.antd樣式的按需引入

1.原因：項目中只是使用了antd中的部分組件，但是卻加載了全部的 antd 組件的樣式（gzipped 後一共大約 60kb），這樣造成的結果是項目打包後體積過大，所以此時我們需要對 create-react-app 的默認配置進行自定義

2.按需引入操作：

說明：在基於上一節使用方法二修改webpack的基礎上進行配置

2.1 安裝babel-plugin-import ：是一個用於按需加載組件代碼和樣式的 babel 插件（原理），現在我們嘗試安裝它並修改 config-overrides.js 文件。

yarn add babel-plugin-import
或者
npm i  babel-plugin-import

2.2修改 config-overrides.js 文件

 1 const { override, fixBabelImports } = require('customize-cra');
 2 
 3 
 4  module.exports = override(
 5   fixBabelImports('import', {
 6      libraryName: 'antd',
 7     libraryDirectory: 'es',
 8      style: 'css',
 9    }),
10  );

 

2.3 移除前面在 src/App.jsx 裏全量添加的 @import 'antd/dist/antd.css'; 樣式代碼

2.4 最後重啓 yarn start 訪問頁面，antd 組件的 js 和 css 代碼都會按需加載，你在控制檯也不會看到這樣的警告信息

這時你能發現沒有在頁面中手動引入樣式，但是組件樣式依然存在，正常顯示。

四.自定義主題

 按照 配置主題 的要求，自定義主題需要用到 less 變量覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件

1.下載安裝less  less-loader

yarn add less less-loader
或者
npm i  less less-loader

2.修改文件

 1 //配置具體的修改規則 
 2 //config-overrides.js
 3  const { override, fixBabelImports, addLessLoader  } = require('customize-cra');
 4  const themeColor = require('./theme-color-config') 
 5 
 6  module.exports = override(
 7     fixBabelImports('import', {
 8      libraryName: 'antd',
 9      libraryDirectory: 'es',
10      style: true,
11    }),
12    addLessLoader({
13     lessOptions:{
14         javascriptEnabled: true,
15         modifyVars: { ...themeColor },
16     }
17    }),
18  );

其中 theme-color-config.js文件也是位於根目錄下的，主要用來配置具體的主題樣式

1 //主題顏色配置
2 //theme-color-config.js
3 module.exports = {
4     '@primary-color': '#FF0000',
5     '@table-bg': '#FFC0CB',
6 }

可以參考 配置主題 文檔配置。

3.最後npm run start重新啓動項目即可

 

 

 

 

 

參考：https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

         https://www.cnblogs.com/haimengqingyuan/p/13380508.html