1. 創(chuàng)建React 工程
npx create-react-app my-app
2.添加less和less-loader 兩個(gè)依賴(lài)庫(kù)
npm install less@3.9.0
npm install less-loader@4.1.0
注意：
如果步驟3 在步驟2前先執(zhí)行侵贵，則需要【刪除】項(xiàng)目中的
package-lock.json后涯呻， 重新執(zhí)行步驟2即可。
3. 彈出配置文件以便自定義項(xiàng)目配置
npm run eject
4. 打開(kāi)config/webpack.config.js 文件，開(kāi)始配置工作
修改style files regexes（樣式文件正則）
參照 sass 配置 less 的樣式文件正則
image.png
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
5.修改getStyleLoaders函數(shù)，并添加如下代碼
同樣搬设，參照css-loader節(jié)點(diǎn)，添加less-loader節(jié)點(diǎn)
image.png
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
6.模仿代碼中提供的sassRegex代碼撕捍，添加如下代碼
image.png
// Adds support for LESS Modules, but using LESS
// less start
{
test: lessRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
}, // less end;
