Ant Design的爬坑之路(一)

Gu_Yan發表於2018-08-18

`antd`的安裝以及`webpack`的`antd`按需引入配置

注：本篇文章筆者主要講一下基於React官方腳手架建立專案後，如何按需引入antd，和如何使用antd的定製主題，僅限於使用層面，本系列文章適合初涉antd的使用者。

安裝`antd`

使用create-react-app腳手架建立專案
通過yarn add antd安裝antd(mac本需要在前面加sudo)

`antd`的按需引入

按照官方文件引入元件

import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由於 antd 元件的預設文案是英文，所以需要修改為中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您選擇的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>當前日期：{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
複製程式碼

不難發現我們的頁面中並沒有把antd的樣式引入，此時聰明的你一定會想到在頁面中直接把antd的樣式引入

即插入import 'antd/dist/antd.css'，但是這樣引入的話我們是不是就把一些沒用到的樣式也引入了呢？

那麼有沒有方法讓我們不用加這一行程式碼，直接在引入元件的時候就把樣式帶上呢？並且還僅僅引入了我們用到的樣式呢？當然答案是肯定的，話不多說，我們直接上乾貨

如何配置

通過yarn add less less-loader安裝less與less-loader(less與less-loader我就不做過多的解釋了)
通過yarn add babel-plugin-import 安裝babel-plugin-import
通過yarn eject 暴露出webpack的配置檔案
在config資料夾下的webpack.config.dev.js和webpack.config.prod.js檔案中配置less
配置antd的樣式按需引入
刪除我們插入的import 'antd/dist/antd.css，重啟我們的專案，你一定會發現頁面上會報下圖所示的錯誤
我們重新安裝less，注意：此時我們不要安裝最新版本，通過yarn add less@2.7.3安裝2.7.3版本的less
成功後重啟我們的專案，此時時刻你就會發現頁面上已經成功引入了antd的樣式。