本文主要是介绍React中的webpack如何配置less，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 暴露配置文件

npm run eject

如果执行 npm run eject报错 小心是.git隐藏文件 需要删除在执行命令

2. 下载loader

npm install less less-loader

说明：推荐使用的方法--不用考虑less-loader版本的问题 

3. 修改webpack.config.js

修改前： const cssRegex = /\.css$/;

修改后： const cssRegex = /\.css|less$/;

 4. 新增loader

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

重启项目即可:测试less文件效果

不推荐方案 -限制版本（参考sass 修改less配置）

打开配置文件 webpack.config.js

1、添加以下代码

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

 2.修改sass配置的loader位置

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

 把sass修改成less 名称 

重启项目

这篇关于React中的webpack如何配置less的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！