使用react脚手架添加webpack的less文件的支持

场景：使用react的脚手架创建的基础项目默认是支持sass文件的，如何让webpack也支持less的配置呢

• 首先将webpack的配置文件放出来具体操作步骤可以参考我的上篇博客
  https://blog.csdn.net/weixin_43956521/article/details/115177830
• 在项目中安装less和less-loader

npm i less less-loader
or
yarn add less less-loader

• 打开webpack.config.js 搜索sassRegex
  

根据sassRegex、sassModuleRegex添加对应的lessRegex、lessModuleRegex

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

• 添加less-loader的配置选项

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

完成配置后，重启项目

npm run start 
or
yarn start

注意：有可能按照以上配置后，启动会报错是因为新版的less-loader的问题 报错信息：React项目按需打包设置后报错./node_modules/antd/es/style/index.less (./node_modules/css-loader/dist/cjs.js?）

可以通过安装低版本的less-loader来解决，亲测有效

yarn remove less-loader
yarn add less-loader@5.0.0

然后重启项目就可以正常解析less文件了