方案一、弹出配置（不推荐）

• 安装依赖：yarn add less less-loader

• 首先 执行 yarn eject 弹出配置项文件（注意：弹出配置不可逆！）

• 在 config 文件夹中 找到 webpack.config.js，在如图所示位置，加上下面两行代码：

// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

• 接着在这个文件中搜索 sassRegex，可找到这两块代码，将这两块代码复制，并将其中的 sass 改为 less
  
• 然后重启，即可编写 less

方案二、craco（推荐）

• yarn add @craco/craco
• yarn add less craco-less
• 修改 package.json 文件

修改前：

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

修改后：

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

• 根目录新建 craco.config.js

const CracoLessPlugin = require("craco-less");
module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { "@primary-color": "#1DA57A" }, //主题颜色javascriptEnabled: true,},},},},],
};

• 完成以上步骤，即可开始编写 less
• 比如 新建 common.less文件，在index.js中引入

import "./style/common.less";