React 版本 16.8.4
寫這篇文章是因?yàn)閭€(gè)人想使用螞蟻金服的AntD UI寫個(gè)demo，中間遇到一些坑，網(wǎng)上找到的一些方案有點(diǎn)過(guò)時(shí)，所以解決問(wèn)題后決定自己寫點(diǎn)經(jīng)驗(yàn)和大家分享。
AntD是用less編寫的，雖然可以直接引入CSS樣式文件，但是為了方便修改AntD主題，我才在開(kāi)發(fā)環(huán)境中添加了對(duì)less文件編譯的支持。
創(chuàng)建項(xiàng)目
當(dāng)前最新React版本是16.8.4.
使用create-react-app腳手架工具創(chuàng)建一個(gè)名為 ant-react 的項(xiàng)目：
項(xiàng)目創(chuàng)建完成后可以看到項(xiàng)目結(jié)構(gòu)很精簡(jiǎn)，沒(méi)有發(fā)現(xiàn)webpack配置文件。之后我們打開(kāi)package.json文件：
這里大家注意看一下這里標(biāo)注了react-scripts文件是2.x版本，https://reactjs.org/blog/2018/10/01/create-react-app-v2.html 此鏈接講述了react-scripts文件的一些變化，主要添加對(duì)sass/scss樣式文件的默認(rèn)支持…
接下來(lái)安裝less和less-loader插件包，打開(kāi)終端輸入：
cd ant-react
yarn add less less-loader
或者npm install less less-loader
配置less-loader
配置less-loader需要暴露webpack配置文件，這就要使用create-react-app腳手架工具提供的 eject 命令（見(jiàn)上圖），運(yùn)行命令前需要將項(xiàng)目commit一下，否則項(xiàng)目無(wú)法eject成功，打開(kāi)終端運(yùn)行 yarn eject命令（或者npm run eject），eject命令是一次性命令，運(yùn)行后無(wú)法恢復(fù)，
yarn eject
命令運(yùn)行結(jié)束之后會(huì)發(fā)現(xiàn)package.json 文件中多了很多內(nèi)容，項(xiàng)目結(jié)構(gòu)中多了一個(gè)config文件夾
打開(kāi)config文件夾，找到webpack.config.js文件打開(kāi)，主要修改里面的三處地方：
- 修改style files regexes（樣式文件正則），找到 注釋style files regexes，在這部分最后添加如下兩行代碼：
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
- 修改 getStyleLoaders 函數(shù)，添加代碼（如圖）
- 最后一處修改大約在429行，模仿代碼中提供的sassRegex代碼，添加如下代碼，如下圖
webpack.config.js文件修改完成。
試一下效果，將index.css文件重命名為index.less,再把index.js文件中引入的index.css文件修改為index.less文件，保存代碼，命令行輸入yarn start 命令（或npm start）
OK，成功了。
