本節引用於antd的官方文檔javascript
這是 create-react-app 生成的默認目錄結構。css
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock
複製代碼
如今從 yarn 或 npm 安裝並引入 antd。html
yarn add antd
複製代碼
修改 src/App.js,引入 antd 的按鈕組件。java
import React from 'react';
import {Button} from 'antd'
import './App.css';
function App() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default App;
複製代碼
修改 src/App.css,在文件頂部引入 antd/dist/antd.css。react
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
...
複製代碼
好了,如今你應該能看到頁面上已經有了 antd 的藍色按鈕組件,接下來就能夠繼續選用其餘組件開發應用了。webpack
咱們如今已經把組件成功運行起來了,可是在實際開發過程當中還有不少問題,例如上面的例子實際上加載了所有的 antd 組件的樣式。web
此時咱們須要對 create-react-app 的默認配置進行自定義,這裏咱們使用 react-app-rewired (一個對 create-react-app 進行自定義配置的社區解決方案)。npm
yarn add react-app-rewired customize-cra
複製代碼
/* 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",
}
複製代碼
而後在項目根目錄建立一個 config-overrides.js 用於修改默認配置。json
注意:antd 默認支持基於 ES module 的 tree shaking,js 代碼部分不使用這個插件也會有按需加載的效果。bash
babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件(原理),如今咱們嘗試安裝它並修改 config-overrides.js 文件。
yarn add babel-plugin-import
複製代碼
而後移除前面在 src/App.css 裏全量添加的 @import '~antd/dist/antd.css'; 樣式代碼,而且按下面的格式引入模塊。
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
複製代碼
最後重啓yarn start
訪問頁面,antd 組件的 js 和 css 代碼都會按需加載
按照 配置主題 的要求,自定義主題須要用到 less 變量覆蓋功能。咱們能夠引入 customize-cra
中提供的 less 相關的函數 addLessLoader 來幫助加載 less 樣式,同時修改 config-overrides.js
文件以下。
yarn add less less-loader
複製代碼
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: {
+ '@primary-color': '#1DA57A'
+ '@link-color': '#1890ff', // 連接色
+ '@success-color': '#52c41a', // 成功色
+ '@warning-color': '#faad14', // 警告色
+ '@error-color': '#f5222d', // 錯誤色
+ '@font-size-base': '14px', // 主字號
+ '@heading-color': 'rgba(0, 0, 0, 0.85)', // 標題色
+ '@text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
+ '@text-color-secondary' : 'rgba(0, 0, 0, .45)', // 次文本色
+ '@disabled-color' : 'rgba(0, 0, 0, .25)', // 失效色
+ '@border-radius-base': '4px', // 組件/浮層圓角
+ '@border-color-base': '#d9d9d9', // 邊框色
+ '@box-shadow-base':' 0 2px 8px rgba(0, 0, 0, 0.15)', // 浮層陰影},
+ }),
);
複製代碼
這裏利用了 less-loader 的 modifyVars 來進行主題配置,變量和其餘配置方式能夠參考 配置主題 文檔。
修改後重啓 yarn start
,若是看到一個綠色的按鈕就說明配置成功了。
更多主題定製方案可參考官網【定製主題】
你也可使用 create-react-app 提供的 yarn run eject 命令將全部內建的配置暴露出來。
參考如下文章進行antd配置: react暴露後,webpack4.19.1實現按需加載antd