我们一般都是通过create-react-app命令来创建的react项目，但是这种方式创建默认是对sass的配置，是没有less的配置的，所以我们就需要自己配置一下。
一、webpack配置文件
我们用脚手架创建的项目默认是看不到webpack配置文件的，怎么能找到webpack配置文件呢，我们可以在package.json文件中可以看到运行命令
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
前三个都是经常用的就不用说了，那么说最后一行命令，就是让webpack配置文件给暴露出来。
在终端运行命令npm run eject或yarn eject
但是事事不如意，我们有可能会出现下列错误：
这是因为我们在使用脚手架创建一个项目的时候，默认会给我增加一个
.gitignore文件，而我们本地却没有文件仓库，这就需要我们在终端输入命令git add .和git commit -m 修改把项目添加到本地仓库。
当以上都执行完毕以后，在次执行npm run eject或yarn eject就没有问题了。成功的截图如下：
暴露配置之后在项目里会增加一个
config文件夹，一个scripts文件夹，并且原来的package.json文件内容会变更多。
二、安装less和less-loader
webpack不能识别less所以要安装相应的loader来把less解析成css。
在终端中输入npm install less-loader less --save或yarn add less-loader less --save
三、修改webpack配置文件
我们在项目根目录中找到刚才生成的config文件，找到里面的webpack.config.js这个文件：
然后搜索sassRegex就可以找到如下代码：
这个就是脚手架默认配置了css和sass的配置变量，我们一样新增less的正则，照葫芦画瓢，把sass的两个变量复制一下修改成less的
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
接着再搜索sassRegex，声明了变量肯定要用，可以找到如下代码：
找到的代码就是默认的sass配置相关的代码，按照上面的方法新增变量的方法，复制sass配置的相关部分，一共两个，把他修改成less的配置代码如下：
// Opt-in support for less (using .scss or .sass extensions).
// By default we support less Modules with the
// extensions .module.less
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'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 less
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
这样就配置完less了，接着就可以重启项目就可以开心的写我们的less了。\
如果遇到报错# bezierEasingMixin()； Inline JavaScript is not enabled. Is it set in your options,说明less版本高于3.X,请看这篇文章解决传送门。
接下来可以看这篇文章配置less全局变量，react中如何使用less配置全局变量，或复制链接 https://juejin.cn/post/7051476074693132296/查看。
