基於create-react-app腳手架，按需加載antd組件以及less樣式

摘要

　　為了更好的書寫css樣式，在react中引入less，在網上查詢了許多關於react引入less樣式文件的資料，大多數都是需要在react項目中npm run eject暴露出底層文件，然后在底層文件中修改dev-env的環境配置。在請教了大佬后知道可以根據antd官網文檔中的高級配置來配備less，通過react-app-rewired來對默認配置進行自定義化，在新的@2.x版本中還需要下載customize-cra。這樣我們就可以在項目的根目錄下創建一個配置文件來修改默認的配置了。詳細介紹可以參考antd官方網站的高級配置文檔。

環境依賴

　　1.下載安裝相關配置、依賴：

npm install less less-loader --save //安裝less、less-loader依賴 npm install react-app-rewired customize-cra --save //安裝自定義配置相關的依賴庫 npm babel-plugin-import --save //安裝用於按需加載的babel插件 

　　2.修改項目啟動配置package.json：（修改"scripts"的啟動配置為react-app-rewired）

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

　　3.根目錄創建config-overrides.js修改默認配置：

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

　　4.npm start重啟項目。

項目測試

　　1.App.js代碼塊：

import React, { Component } from 'react';
import './App.less'  //引入less樣式文件
import { Button, Tag } from 'antd';  //引入antd的按鈕、標簽組件

class App extends Component {
  render() {
    return (
      <div className="box">
        <Button type='danger'>請點擊我一下</Button>
        <div className='home'><Home /></div>
      </div>
    );
  }
}

//無狀態功能函數組件
const Home = () =>{
  return (
    <div className='box-items'>
      <div className="box-item">
        <Tag color='#f50'>啊！我被電擊了</Tag>
        <Tag color='#108ee9'>Hello!React</Tag>
        <Tag color='#faad14'>警告你別搞事啊，小老弟！</Tag>
      </div>
    </div>
  )
}

export default App;

　　2.App.less樣式代碼塊：

/*{App組件less樣式}*/
.box {
  width: 100vw;
  height: 30vh;
  background: wheat;
  .unity();
  flex-direction: column;
  .home{
    margin: 20px;
  }
}

/*{Home組件less樣式}*/
.box-items{
  width: 30vw;
  height: 10vh;
  background: pink;
  .unity();
}

/*{通一less樣式}*/
.unity{
  display: flex;
  justify-content: center;
  align-items: center;
}

　　3.運行結果：（引入less樣式文件成功）

總結

　　less.js讓css的寫法更加的靈活且更趨近於html的方式書寫樣式，為了在react項目中引入less，參考了antd的高級配置引入了我們項目中所需要的less樣式，這個方法簡化了配置less的操作，同時也避免了eject暴露底層文件。基於個人在開發過程中的經歷，故此分享一下這個引入less的方式。antd官網還有另一種比較類似的方式引入less，在此就不多復述，如大家有更好更靈活的方式，可以一起探討學習。