最近在用react.js 結合螞蟻金服的 Ant Design Mobile 作一個單頁面的應用程序,遇到了一個很棘手的問題——那就是 react腳手架不支持less,看了很多優秀博主如何在react腳手架中使用less,,以爲繁瑣且又不能解決實際問題,因而本身弄明白後感受如此簡單,作了這麼個教程,避免新手走彎路。html
聲明一下我用的是微軟的代碼編輯軟件VS code,下面的是詳細的圖文教程。node
前期準備:react
經過命令 create-react-app react-demo 建立了本身的React應用並能正常運行。webpack
create-react-app react-demo
下面是如何讓react腳手架支持less的圖文教程:web
step1:首先把本身建立好的項目添加到工做區,若是已添加到工做區,這一步跳過。npm
step2:在終端安裝less 和 less-loader。下面是命令:sass
npm install less less-loader --save-dev
step3:點開項目文件夾,並依次找到 node_modules/react-scripts/config/webpack.config.js。以下圖被紅色選框選中的文件就是咱們須要修改的。app
step4(關鍵):打開這個文件並添加下面兩行代碼 less
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的問題。