環(huán)境信息：

create-react-app:v5
react:18.2.0
node:18.16.0
如果你不必須使用 less 建議直接使用scss。
因為less配置會遇到很多問題。

配置less過程：

如果你只需要 sass的話，就可以直接使用sass。因為默認配置了scss。
npm、yarn、cnpm、pnpm都行

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

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

方式一：npm run eject的方式

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

方式二：不暴露webpack配置

方式一：使用@craco/craco

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

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

1.運行

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

npm install less less-loader --save-dev

2.在項目根目錄創(chuàng)建一個config-overrides.js 文件
引入 addLessLoader 這個是添加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有不同的寫法，因為最新版本的api有變化。
這個是 上面文檔里的寫法，直接寫屬性。而我的則 包了一層 lessOptions。如果你用上面的報了個 api 不匹配 可以用這個試試。

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.運行 npm start 會發(fā)現(xiàn)報了個錯
（1.）Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
這個錯是postcss-loader版本太高了和框架本身的webpack配置有沖突。
解決方案就是降級：

運行

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 配置起來會相對簡單，沒那么多的問題。
但是很多人 不想暴露eject，因為它不可逆 ，會選擇用一個插件來覆蓋原本的配置react-app-rewired 和 customize-cra ，v5版本請用 customize-cra-5用的人還是比較多的（我會推薦這種方式）。

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

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

區(qū)別：

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

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

SCSS更適合用于大型項目，因為它具有更好的組織和可維護性，同時支持更多高級功能，例如嵌套、函數(shù)、混合和條件語句。LESS更適合用于簡單的樣式表或者需要動態(tài)生成CSS的情況，因為它簡單易用，擴展了CSS語言，并提供了更多方便的功能，例如變量、Mixin和函數(shù)。

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

補充：使用cssModules的方法

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

然后就可以使用 styles.xx了，效果就是他會自動加一個隨機的字符串，可以防止類名沖突！

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

其他配置可以參考這個：react create-react-app v5 從零搭建項目