antdInstallation andwebpacktheantdImport configurations on demand

Note: This article focuses on how to introduce ANTD on demand after creating a project based on React official scaffolding, and how to use antD custom themes. This series of articles is limited to the use level, and is suitable for beginners of ANTD.

The installationantd

  • usecreate-react-appScaffold creation project
  • throughyarn add antdInstall ANTD (MAC should be added firstsudo)

antdOn demand

  • Import components as per official documentation
import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// Since the antD component's default text is In English, it needs to be changed to Chinese
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('The date you have chosen is:' + (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}} >Current date: {this.state.date && this.state.date.tostring ()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code
  • It’s not hard to see that our page does notantdAt this point, you are smart enough to want to put it directly in the pageantdStyle introduction

Insert import ‘antd/dist/antd.css’, but by doing so, are we introducing some styles that we don’t use?

  • So is there a way to introduce styles without adding this line of code? And only introduced the styles we used? Of course, the answer is yes. Without further ado, let’s get straight to the dry stuff

How to configure

  • throughyarn add less less-loaderThe installationlesswithless-loader(lesswithless-loaderI won’t explain it too much.)
  • throughyarn add babel-plugin-importThe installationbabel-plugin-import
  • throughyarn ejectexposedwebpackConfiguration file of
  • inconfigUnder folderwebpack.config.dev.jsandwebpack.config.prod.jsConfiguration in fileless
  • configurationantdStyles are introduced on demand
  • Delete what we insertedimport 'antd/dist/antd.cssRestart our project and you are bound to find the error shown below
  • Let’s reinstallless, note: at this time we do not install the latest version throughYarn add [email protected]The installation2.7.3Version of theless
  • After success, restart our project and you will see that it has been successfully introduced on the pageantdStyle.

antdCustom theme

  • inThe official documentationThe author also described the customized theme, but the personal test has no effect (it may be the author’s use method is wrong, if you have a better method, welcome to comment or private letter, common progress), the author recommends the following method, inwebpack.config.dev.jsandwebpack.config.prod.jsIn the configuration

Write in the last

It was published for the first time, and a series of antD articles will be updated one after another. The problems involved in the articles are all the pits that have troubled the author. The purpose is to let some friends who are new to ANTD avoid detdetments.