要在使用create-react-app 创建的 react 项目中使用less 文件，请按照下列步骤操作：

1. npm run eject
2. npm i less less-loader
3. 打开位于弹出脚本后创建的 config 文件夹中的 webpack.config.js 文件：

查看导出函数的返回值（这是主配置）

找到最后添加的 style-loader 是 sass-loader

       {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'sass-loader'
          ),
        },

并在 sass-loader 下添加 less-loader，如下所示：

       {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'sass-loader'
          ),
        },
        {
          test: /\.less$/,
          use: getStyleLoaders(
            {
              modules: true,
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            '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,
        },

less-loader 中的importLoaders选项应该是 3。

来自 getStyleLoaders 的两个加载器+ 我们的less-loader。

选项 importLoaders 允许您在 css-loader 应用于 @imported 资源之前配置多少个加载器。

为什么module选项为真？

// index.less file

.header {
  background-color: skyblue;
}

如果你想使用这样的样式表文件：

import styles from './index.less';

<div className={styles.header}></div>

你应该设置module：true

但如果你想像下面那样使用它：

import './index.less';

<div className="header"></div>

你应该设置module：false

CRA（Create React App）默认只支持SASS，CSS如果你想使用LESS你需要先做npm run eject然后修改webpack配置。

然而，有一种方法可以在不弹出的情况下做到这一点，但我不得不说我个人更喜欢弹出。您可以在此处找到说明

如果您使用的是 CRA，我建议您不要弹出。

首先安装less，less-watch-compiler然后concurrently：

npm install less less-watch-compiler concurrently --save-dev

然后在您的根目录中创建less-watcher.config.json并设置配置：

{
    "watchFolder": "src/",
    "outputFolder": "src/",
    "runOnce": false,
    "enableJs": true
}

重命名App.css为App.less

将 start scriptin替换package.json为以下内容：

"scripts": {
    "start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
    "build": "react-scripts build",
    ....
}

并运行应用程序。享受 ：）

尝试：

{test:/\.less$/, use:['style-loader','css-loader','less-loader']}