react 项目中配置less 编写代码

一，首先安装less
安装less的前提必须是已经安装完成了node.js
如果未安装less的小伙伴请先安装node.js
node环境安装完成的小伙伴
使用安装命令： npm install less less-loader --save 安装less环境
如图：

执行完成之后 需要把隐藏文件执行命令拿出来进行配置
命令如下 npm run eject 将脚手架隐藏的配置文件config->webpack.config.js显示出来.并且配置

这是执行完后的样子；

在webpack.config.js文件中的53行下增加less的解析规则：
const lessRegex =/.less$/;

const lessModuleRegex =/.module.less$/;

如图

下一步在webpack.config.js文件中的490行插入：

{

              test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                },

                'less-loader'

              ),

              sideEffects: true,

            },

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                  modules: true,

                  getLocalIdent: getCSSModuleLocalIdent,

                },

                'less-loader'

              )

            },

如图

完成这步骤就可以直接启动项目了

但是我这里遇到了报错的问题
如图

别慌很简单
先执行第一句这个命令
yarn remove less-loader
在执行第二句这个命令
yarn add less-loader@5.0.0

执行完这两句命令问题就愉快的解决啦 项目可以启动你可以愉快的使用less编写代码了