前提需要使用create-react-app脚手架搭建，初始化搭建可参考另一篇文章：https://www.jianshu.com/p/4a4265f49376
下面主要说明在react-app 中使用 less的步骤

1.安装依赖包

yarn add customize-cra react-app-rewired
yarn add less less-loader@5.0.0

2. 修改项目的 package.json

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

3.根路径新建文件config-overrides.js

config-overrides.js

const { override, addLessLoader } = require("customize-cra");
module.exports = override(addLessLoader());

4.修改App.css为App.less, 修改引用

App.less

.App {
  text-align: center;
  color: red;
}

App.tsx

import React, { FC } from "react";
import "./App.less";
const App: FC = () => (
  <div className="App">
    <span>123</span>
  </div>
);
export default App;

5.运行yarn start

字变红了，ok~

image.png

中途遇到的错误
如果less-loader版本过高启动后会报this.getOptions is not a function错误：

image.png

解决方案：

yarn remove less-loader
yarn add less-loader@5.0.0