React腳手架less的安裝

  最近在用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的問題。

相關文章
相關標籤/搜索