參考：https://www.jianshu.com/p/bfa308164df4

出現問題解決參考：https://blog.csdn.net/weixin_42614080/article/details/106951617

前提：create-react-app建立一個react專案

想要在專案中使用less樣式檔案

步驟

1，進入專案路徑下，安裝less和less-loader

yarn add less less-loader

或者

npm install less less-loader

2，配置less-loader

配置less-loader需要暴露webpack配置檔案，這就要使用create-react-app腳手架工具提供的 eject 命令，執行命令前需要將專案commit一下，否則專案無法eject成功，開啟終端執行 yarn eject命令（或者npm run eject），eject命令是一次性命令，執行後無法恢復【這是參考的文章的說法】

PS：（1）剛建立的專案直接使用yarn eject命令（或者npm run eject）暴露出webpack配置檔案

（2）建立後已經修改過的專案，可以去node_modules\react-scripts\config目錄下修改webpack.config.js檔案

3，開啟webpack.config.js檔案，主要修改三個地方

（1）

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

（2）

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 
 
1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              },
              'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
 

              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              },
              'less-loader'
              ),
            }

（3）

{
     loader: require.resolve('less-loader'),
     options: lessOptions,
}

webpack.config.js檔案修改完成。

4，試一下效果，將index.css檔案重新命名為index.less,再把index.js檔案中引入的index.css檔案修改為index.less檔案，儲存程式碼，命令列輸入yarn start 命令（或npm start）

Module build failed (from ./node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialised using
an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImpo
rter? }
    at validate 
    at Object.loader

問題的分析及解決：

1. 問題的分析： 這個實際上是Less Loader的版本導致的相容性問題，需要更換Less Loader的版本。
2. 問題的解決：把Less Loader進行降級，通過npm remove less-loader命令解除安裝Less Loader，通過npm i [email protected]命令安裝[email protected]的版本，然後問題就可以解決了