React中低版本的webpack配置less的方案

React中低版本的webpack配置less的方案

如果用create-react-app创建出react项目，那么如下所示，所有安装的的东西会放在scripts中

其中"scripts"帮你自动下载需要的 webpack-dev-server 依赖,包括开始start，打包build，测试test，配置都放在eject中，所以如果想要配置自带的依赖外的less的东西需要暴露出eject依赖文件

yarn less-loader或者npm install less-loader//先安装依赖
yarn eject 或者npm run eject//解构目录

执行上面操作之后，自动会生成config文件夹，需要修改webpack.config.dev.js和webpack.config.prod.js两个文件，打开config目录下的webpack.config.dev.js，修改webpack配置，如下图

高版本webpack配置less

在配置文件中做了两处修改

第一处是找到 cssRegex和cssModuleRegex 在他们得我下面新建lessRegex和lessModuleRegex变量

第二处是增加 less-loader的配置

具体修改如下

//第一块大概在38行左右
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//第二块大概在318行左右
 //配置less
{
 test: lessRegex,
 exclude: lessModuleRegex,
 use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
{
  importLoaders: 2,
  modules: true,
  getLocalIdent: getCSSModuleLocalIdent,
   },
 'less-loader'
 ),
 },

同样webpack.config.prod.js开发环境中也做一样的修改
切记万万不可将整个文件复制过去，毕竟安装的东西都不一样，按需复制即可

低版本webpack配置less

// 第一处是找到 `test: /\.css$/` 将其改为  `test: /\.(css|less)$/`
  // 第二处是增加 `less-loader`的配置
  // 第三处是在exclude属性中增加 `/\.(css|less)$/` 
  // 具体修改如下
  module: {
    ...
    {
      // test: /\.css$/  第一处 
      test: /\.(css|less)$/,
      use: [
        require.resolve('style-loader'),
        ...
        // 第二处
        {
          loader: require.resolve('less-loader')
        }
      ]
    },
    {
      exclude: [
        /\.(js|jsx|mjs)$/, 
        /\.html$/, 
        /\.json$/,
        // 第三处
        /\.(css|less)$/,
      ]
    }
  }

最好在node_modules/react-scripts路径下的webpack.config.prod.js和webpack.config.dev.js也进行上面同样的修改，因为我试过只修改config文件夹下的webpack.config.prod.js和webpack.config.dev.js还是没有效果。
最后重新启动，引入的less就起作用了。
参考链接： https://zhuanlan.zhihu.com/p/52088011