1. 創(chuàng)建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前先執(zhí)行，則需要【刪除】項目中的package-lock.json后， 重新執(zhí)行步驟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函數(shù)，并添加如下代碼

同樣，參照css-loader節(jié)點，添加less-loader節(jié)點

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;

參考：在react中配置less