解決React腳手架create-react-app中不能使用less問題

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了。