如何在react中安装并配置less，简单易用

1.首先我们需要暴露webpack配置项

yarn eject

执行了上面的指令后大家应该可以看到暴露出来的文件夹如下图

  

2.安装一下less相关的依赖：

npm i less less-loader --save

 
3.接下来就是配置环节 ：先打开webpack.config.js文件（需要配置三个地方）

4.在文件中按住Ctrl+F进行搜索，首先搜 style files regexes 找到位置后添加如下代码

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

下面就是添加代码后的截图：

 5.在文件中按住Ctrl+F进行搜索，搜 getStyleLoaders 找到位置后添加如下代码

 {
      loader: require.resolve('less-loader'),
      options: lessOptions,
 },

 下面就是添加代码后的截图：添加代码的地方我标记出来了

  6.在文件中按住Ctrl+F进行搜索，搜 getCSSModuleLocalIdent 找到位置后添加如下代码

                     

  {
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 1,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                },
                                'less-loader'
                            ),
                            sideEffects: true,
                        },
                        {
                            test: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 1,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                    module: true,
                                    getLocalIdent: getCSSModuleLocalIdent
                                },
                                'less-loader'
                            ),
                        },

 下面就是添加代码后的截图：

 

到目前为止我们的less就配置完了，大家可以愉快的使用了。 
原文链接：https://blog.csdn.net/qq_44890362/article/details/122562638