React腳手架create-react-app不支援less，因此需要配置webpack的webpack.config.js檔案。

在使用React腳手架的時候，可能發現是沒有webpack.config.js檔案的。執行npm run eject，會多出兩個目錄config和scripts，此時可以在config目錄下看到配置檔案webpack.config.js。

下載less less-loader

使用 npm 或 yarn 下載均可：

// 使用npm
 npm install less less-loader --save-dev
 // 使用 yarn
 yarn add less less-loader
 

配置 webpack.config.js檔案

第一步

React腳手架是支援sass的，因此可以像配置sass一樣配置less就可以。在webpack.config.js檔案中找到下面這幾行程式碼，定義less變數。

​

第二步

在module屬性下的rules中新增less的loader處理，找到sass的配置，對照配置一份。

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

​

分別替換成 lessRegex, lessModuleRegex, ‘less-loader‘ 並儲存 如下圖：

​

這樣就可以在元件中直接使用less了。