環(huán)境信息：

create-react-app:v5
react:18.2.0
node:18.16.0
如果你不必須使用 less 建議直接使用scss。
因?yàn)閘ess配置會(huì)遇到很多問(wèn)題。

配置less過(guò)程：

如果你只需要 sass的話，就可以直接使用sass。因?yàn)槟J(rèn)配置了scss。
npm、yarn、cnpm、pnpm都行

npm install node-sass sass-loader --save-dev

經(jīng)過(guò)我的踩坑，我建議 create-react-app v5版本的使用 方式三！也就是使用 customize-cra-5！

方式一：npm run eject的方式

這個(gè)方式是運(yùn)行npm run eject 暴露出webpack配置，然后再配置就可以了。這個(gè)暴露之后是不可逆的！
具體方式參考：
Less配置指南
從0到1創(chuàng)建React項(xiàng)目+TS（1）創(chuàng)建項(xiàng)目，配置less、全局注冊(cè)less、配置別名

方式二：不暴露webpack配置

方式一：使用@craco/craco

create-react-app中引入less的相關(guān)配置以及CSS Modules使用
create-react-app中配置支持less

方式二：使用 react-app-rewired和 customize-cra

1.運(yùn)行

npm install react-app-rewired customize-cra --save-dev

npm install less less-loader --save-dev

2.在項(xiàng)目根目錄創(chuàng)建一個(gè)config-overrides.js 文件
引入 addLessLoader 這個(gè)是添加less的api
具體api文檔如下：
customize-cra/api.md

const { override, addLessLoader, addPostcssPlugins } = require("customize-cra");module.exports = override(addLessLoader({  lessOptions:{javascriptEnabled: true,  modifyVars: { '@primary-color': '#1DA57A' }, // 你的主題色  },}) 
);

這里需要注意需要根據(jù)不同版本的less-loader有不同的寫法，因?yàn)樽钚掳姹镜腶pi有變化。
這個(gè)是 上面文檔里的寫法，直接寫屬性。而我的則 包了一層 lessOptions。如果你用上面的報(bào)了個(gè) api 不匹配 可以用這個(gè)試試。

const { addLessLoader } = require("customize-cra");module.exports = override(addLessLoader({strictMath: true,noIeCompat: true,modifyVars: {"@primary-color": "#1DA57A", // for example, you use Ant Design to change theme color.},cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.cssModules: {localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.},})
);

根據(jù)版本 調(diào)整less配置結(jié)構(gòu)
Breaking change: css-loader@^3.0.0 (+addLessLoader)

3.修改package.json 里scripts配置

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

4.修改 App.css 的后綴名為less ，index.js 里引入也要修改import ‘./index.less’;

5.運(yùn)行 npm start 會(huì)發(fā)現(xiàn)報(bào)了個(gè)錯(cuò)
（1.）Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
這個(gè)錯(cuò)是postcss-loader版本太高了和框架本身的webpack配置有沖突。
解決方案就是降級(jí)：

運(yùn)行

cnpm uninstall postcss-loader

然后下載低版本的loader

cnpm install postcss-loader@2.0.0

Module build failed (from ./node_modules/.store/postcss-loader@6.2.1/node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.- options has an unknown property 'plugins'. These properties are valid:object { postcssOptions?, execute?, sourceMap?, implementation? }

(2).Error: PostCSS plugin postcss-normalize requires PostCSS 8.
降低postcss-normalize
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
降低postcss-flexbugs-fixes 版本

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: plugin is not a function

等等這些都是postcss和postcss-loader引起的所以如果遇見就降低 版本就行。下面是我的版本配置：

```javascript"postcss": "^4.1.16","postcss-flexbugs-fixes": "^4.2.1","postcss-loader": "^2.0.0","postcss-normalize": "^4.0.0","postcss-preset-env": "^9.1.4",```

方式三：使用customize-cra-5

和方式二 步驟一樣，只是 把customize-cra 換成 customize-cra-5

yarn add customize-cra-5 react-app-rewired --dev

然后寫法不變，而且不用降低 less-loader版本了！！！！

總結(jié)：

暴露 eject 配置起來(lái)會(huì)相對(duì)簡(jiǎn)單，沒(méi)那么多的問(wèn)題。
但是很多人 不想暴露eject，因?yàn)樗豢赡?，會(huì)選擇用一個(gè)插件來(lái)覆蓋原本的配置react-app-rewired 和 customize-cra ，v5版本請(qǐng)用 customize-cra-5用的人還是比較多的（我會(huì)推薦這種方式）。

怎么選擇全看你們的需求！甚至 less都可以不用，直接用scss 。

SCSS和LESS都是CSS的預(yù)處理語(yǔ)言，它們都擴(kuò)展了CSS語(yǔ)言并提供了更多功能，但它們之間還是存在一些區(qū)別。

區(qū)別：

1.變量：在SCSS中，使用$作為變量標(biāo)識(shí)符，而在LESS中，使用@作為變量標(biāo)識(shí)符。
2. 嵌套：SCSS支持CSS嵌套規(guī)則，而LESS不支持。

函數(shù)和混合(mixin)：SCSS和LESS都支持函數(shù)和混合，但使用方式不同。SCSS使用@mixin和@include來(lái)定義和引用混合，而LESS使用.mixin()和.include()。另外，SCSS的函數(shù)名稱以/開頭，而LESS使用~或者::。
輸出設(shè)置：SCSS提供了4種輸出選項(xiàng)：nested、compact、compressed和expanded，而LESS沒(méi)有提供輸出設(shè)置。
條件語(yǔ)句：SCSS支持條件語(yǔ)句，可以使用if{}else{},for{}循環(huán)等，而LESS不支持。
使用場(chǎng)景：

SCSS更適合用于大型項(xiàng)目，因?yàn)樗哂懈玫慕M織和可維護(hù)性，同時(shí)支持更多高級(jí)功能，例如嵌套、函數(shù)、混合和條件語(yǔ)句。LESS更適合用于簡(jiǎn)單的樣式表或者需要?jiǎng)討B(tài)生成CSS的情況，因?yàn)樗?jiǎn)單易用，擴(kuò)展了CSS語(yǔ)言，并提供了更多方便的功能，例如變量、Mixin和函數(shù)。

大部分情況是 scss和less 都可以，選一個(gè)就好了

補(bǔ)充：使用cssModules的方法

上面我們使用了less，但想要實(shí)現(xiàn)模塊化就得改一下文件名和引入方式了。
如下圖：
App.less改成App.module.less
App.js 引入 改成import styles from ‘./App.module.less’;

然后就可以使用 styles.xx了，效果就是他會(huì)自動(dòng)加一個(gè)隨機(jī)的字符串，可以防止類名沖突！

scss的話也是同理，上面的步驟改城scss就行

其他配置可以參考這個(gè)：react create-react-app v5 從零搭建項(xiàng)目