1. 創建React 工程
npx create-react-app my-app
2.添加less和less-loader 兩個依賴庫
npm install less@3.9.0
npm install less-loader@4.1.0
注意：
如果步驟3 在步驟2前先執行，則需要【刪除】項目中的
package-lock.json后， 重新執行步驟2即可。
3. 彈出配置文件以便自定義項目配置
npm run eject
4. 打開config/webpack.config.js 文件，開始配置工作
修改style files regexes（樣式文件正則）
參照 sass 配置 less 的樣式文件正則
image.png
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
5.修改getStyleLoaders函數，并添加如下代碼
同樣，參照css-loader節點，添加less-loader節點
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;
