前提需要使用create-react-app腳手架搭建尝盼，初始化搭建可參考另一篇文章：http://www.reibang.com/p/4a4265f49376
下面主要說(shuō)明在react-app 中使用 less的步驟
1.安裝依賴包
yarn add customize-cra react-app-rewired
yarn add less less-loader@5.0.0
2. 修改項(xiàng)目的 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.運(yùn)行yarn start
字變紅了，ok~
image.png
中途遇到的錯(cuò)誤
如果less-loader版本過(guò)高啟動(dòng)后會(huì)報(bào)this.getOptions is not a function錯(cuò)誤：
image.png
解決方案：
yarn remove less-loader
yarn add less-loader@5.0.0
