前言

create-react-app是由React官方提供並推薦使用構建新的React單頁面應用程式的最佳方式,其構建的專案預設是不支援less的,需要我們手動整合

一、react腳手架搭建

1、先全域性安裝create-react-app(提前需要安裝node)

npm install -g create-react-app

2、然後通過create-react-app建立專案my-app

create-react-app my-app

3、最後通過cd進入專案資料夾並啟動

cd my-app
yarn start

4、終端出現如下介面表示啟動成功，並在瀏覽器中輸入http://localhost

二、目錄結構

       ┌─node_modules                      -依賴包
       ├─public                            -全域性檔案
       ├─src                               -專案檔案
       ├─.gitignore                        -提交被git忽略檔案目錄
       ├─package.json                      -專案配置檔案
       ├─README.md                         -README檔案
       └─yarn.lock                         -鎖定專案所需的各種配置版本
 

三、安裝less和less-loader(less編譯器)

yarn add less less-loader

安裝完成之後該怎麼配置呢？這時需要通過webpack來配置less-loader，但是我們在上面的目錄結構中似乎並沒有發現webpack.config.js檔案，這是因為腳手架為了實現“零配置”，會預設把一些通用的指令碼和配置整合到 react-scripts，目的是讓我們專注於src目錄下的開發工作，不再操心環境配置。同時，被其整合的指令碼和配置也會從程式目錄中消失 ，程式目錄也會變得乾淨許多
接下來，我們就需要通過yarn eject將webpack配置暴露出來

四、暴露webpack配置

執行yarn eject

提示：執行該命令後會把已構建依賴項、配置檔案和指令碼複製到程式目錄中。該操作是不可逆轉的，執行完成後會刪除這個命令，也就是說只能執行一次

配置完成之後，我們會發現我們的目錄結構中會多出兩個資料夾：

其中config資料夾，有三個關於 webpack 的配置檔案：

webpack.config.dev.js 開發環境配置
webpack.config.prod.js 生產環境配置
webpackDevServer.config.js 開發伺服器配置

五、修改webpack配置檔案

第一步：到webpack.config.dev.js檔案中找到如下程式碼，在sassModuleRegex後面加上lessRegex和lessModuleRegex變數

第二步：在下面加上這兩段程式碼

第三步：按照同樣的方法，把webpack.config.prod.js也配置上

六、測試

1、在src目錄中把App.css改為App.less檔案，並在裡面加上

@title-color:#f00;
.App-link {
  color:@title-color;
}

2、然後再App.js中把less檔案匯入

import './App.less';

3、回到頁面重新整理，發現字型變紅，說明配置成功

七、整合Ant Design 並配置按需載入

antd：是螞蟻金服推出的一個很優秀的react UI庫，其中包含了很多我們經常使用的元件，對於小白學習react來說十分友好！

1、首先需要安裝antd

yarn add antd

2、安裝完成之後我們就可以直接在程式碼裡使用它的ui元件了

import {Button} from 'antd';
import 'antd/dist/antd.css';

這個方法的優點是比較簡單，不需再次配置，直接載入即可，但是比較麻煩，每次載入一個新的元件都需要先載入元件，再載入元件的css檔案，效能較差

3、使用 babel-plugin-import 來進行按需載入

yarn add babel-plugin-import --save-dev

4、安裝完成之後，在package.json中找到babel配置項，然後再裡面加上plugins

注意： 這裡babel配置項是需要通過yarn eject暴露出來才會有，原本的package.json是沒有這個配置項的

5、最後只需從antd引入模組即可，無需單獨引入樣式, babel-plugin-import會幫助你載入 JS 和 CSS

import {Button} from 'antd';

6、關於antd的按需載入其實還有其他的方法，官方推薦使用react-app-rewired來實現antd的按需載入
詳見: https://ant.design/docs/react...