首先大家明白一点React中默认是配置Sass的，所以想要配置Less的话看下面：

1.有一些第三方的框架会默认配置less 例如：

a:umi.js （蚂蚁金服前端框架）按照该框架官方文档引入即可

2.手动配置Less即可

a.首先先创建一个初始的React-app。此时，就算import less也无法应用，因为React提供的脚手架为creact-react-app默认配置sass。

b.接下来，就是固定的npm安装less

npm install less less-loader --save

c.在创建好的项目文件夹中找到 package-lock.json 文件进入，Ctrl+f后输入eject找到该行代码

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

d.运行eject，中间可能会需要输入y去确定其他配置，可直接一y到底

npm eject||yarn eject

e.此时，项目列表下的config文件夹中可以找到 webpack.config.js 这个文件，打开进入

f.Ctrl+f查找输入sassregex找到该行，并连同下一行一起复制

 

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//紧靠其后添加两行代码
const lessRegex=/\.less$/;
const lessModuleRegex = /\.module\.less$/;
//只是将sass修改为less

 

g.继续找下一处sassRegex和sassModuleRegex

 

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },

 

将这两段代码复制，并且都将sass修改为less即可，为防止大家在修改过程中因为括号和标点出错，将源码贴到下面：

 

            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
//以上为文件原有sass配置代码，下面为添加的less配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

接下来就能够创建后缀为.less的文件并编辑样式了，大家可以覆盖调之前的css文件代替为less试一试是否成功，大家有问题可以评论区提问，或者本人解释错误的请提出来，谢谢