react 配置less，解决less文件不生效的问题

1、执行npm run eject，暴露出webpack配置文件，如果报错
（1）报错信息：缺少react-scripts依赖，执行

npm install --save react-scripts

（2）如果有个又臭又长的报错，则执行

 git init
 git add .    //注意后面这里有个点哦
 git commit -m 'Saving before ejecting'

（3）最后再执行npm run eject，输入yes即可
（4）暴露成功后，会出现config和scripts文件夹

image.png

2、安装less、less-loader，版本如下，自行选择

image.png

3、配置webpack.config.js文件，踩了很多坑，最后在官网找到这个配置，官网yyds

image.png
image.png

找到前面2张图的位置，在sass后面添加上less的配置，如下图

image.png

代码如下：

// Less 解析配置
                        {
                            test: /\.less$/i,
                            use: [
                                {
                                    loader: "style-loader",
                                },
                                {
                                    loader: "css-loader",
                                },
                                {
                                    loader: "less-loader",
                                    options: {
                                        lessOptions: {
                                            strictMath: false,
                                            javascriptEnabled: true,
                                            math: "always",
                                        },
                                    },
                                },
                            ],
                        },

最后，重启项目即可