React的webpack.config.js中配置less

在React的webpack.config.js中配置less

第一，先暴露webpack的文件

	输入命令 ： yarn eject

执行成功后会出现webpack.conofig.js文件，如果失败请参考：https://blog.csdn.net/August_leo/article/details/85463753

第二，安装less 和 less-loader

输入命令 ： yarn  add   less less-loader

第三，修改webpack.config.js文件

在文件中的oneOf:[ ]这个数组中添加一下代码，必须是oneOf数组的第一个元素。

   {
          test: /\.less$/,
          use:[
              {loader: "style-loader"},
              {loader: "css-loader"},
              {
                  loader: "less-loader",
                  options: {
                      sourceMap:true,
                      modifyVars:{
                         // '@primary-color':'#F0CF13',
                      },
                      javascriptEnabled:true,
                  },
              }
          ],
      },

可能会出现以下两种异常：


解决方法：安装提示中的模块就可以了

 yarn add  @babel/plugin-transform-react-jsx-source
 yarn add  @babel/plugin-transform-react-jsx-self

按需加载请参考：https://blog.csdn.net/weixin_45415885/article/details/96476117