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的問題。