React腳手架less的安裝

　　最近在用react.js 結合螞蟻金服的 Ant Design Mobile 作一個單頁面的應用程序，遇到了一個很棘手的問題——那就是 react腳手架不支持less，看了很多優秀博主如何在react腳手架中使用less,,以爲繁瑣且又不能解決實際問題,因而本身弄明白後感受如此簡單,作了這麼個教程,避免新手走彎路。

聲明一下我用的是微軟的代碼編輯軟件VS code，下面的是詳細的圖文教程。

前期準備：

經過命令 create-react-app react-demo 建立了本身的React應用並能正常運行。

create-react-app react-demo

下面是如何讓react腳手架支持less的圖文教程：

step1：首先把本身建立好的項目添加到工做區，若是已添加到工做區，這一步跳過。

step2：在終端安裝less 和 less-loader。下面是命令：

 

npm install less less-loader --save-dev

 

step3：點開項目文件夾，並依次找到 node_modules/react-scripts/config/webpack.config.js。以下圖被紅色選框選中的文件就是咱們須要修改的。

step4(關鍵)：打開這個文件並添加下面兩行代碼 

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

如圖：

step5(關鍵)：在這個文件裏快捷鍵Ctrl+F 搜索 sassRege 並複製鼠標選中的代碼。

在這個代碼塊後面換行，粘貼並作部分修改：

修改的地方有三處，以下圖我選中的紅色選框：

分別替換成 lessRegex, lessModuleRegex, 'less-loader' 並保存 以下圖：

 

step6(關鍵)：和step5同樣。快捷鍵Ctrl+F 搜索 sassModuleRegex 複製鼠標選中的代碼：

在這個代碼快後面換行，粘貼並作部分修改：

修改的地方有三處，以下圖我選中的紅色選框：

 

分別替換成  lessRegex、 lessModuleRegex、 less-loader'並保存 以下圖：

step6(測試)：

在src下面創建一個style.less文件，代碼以下：

@nice-blue:pink;
@light-blue: @nice-blue + #111;
.header { color: @light-blue; }

 

而後把這個 style.less 引入App.js

import './style.less';

在終端敲命令 npm start 完美的運行結果：

這樣就解決了React腳手架不支持less的問題。