react配置less-loader，两种配置方案

1、暴露配置文件

请查阅相关文章 https://web03.cn/blog/152

下载loader

npm install less less-loader

配置方案1（推荐） 打开配置文件 webpack.config.js

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

新增代码

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

修改代码

// exclude: /@babel(?:\/|\\{1,2})runtime/,//修改前
exclude: [/@babel(?:\/|\\{1,2})runtime/,/\.(css|less)$/],//修改后

重启项目即可

配置方案2（不推荐，限制版本） 打开配置文件 webpack.config.js

1、添加以下代码

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

2、添加以下代码

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

3、添加以下代码

{
  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'
  ),
},

可以Ctrl+f搜索sassModuleRegex，在它下面添加

重启项目

tip

如出现报错 Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

解决

手动把less-loader调整至5.0.0版本即可 修改

修改完成执行

npm install