使用create-react-app创建一个react项目的时候，默认是不支持less的，所以需要手动配置一下

首先去package.json检查一下是否安装了less的依赖包，没有的话就安装一下

npm install less less-loader

安装之后应该是可以看到依赖包版本了

package.json

如果根目录下没有config目录，也没有等会要修改的webpack.config.js文件，那就需要暴露一下配置

yarn eject

输入这个命令之后有可能会报错

原因是本地没有文件仓库，需要一下文件到本地仓库，在终端输入

git add .

git commit -m 'init'

yarn eject

应该就没有报错了，如果还是错误，是因为没有在你项目根目录初始化git， 终端重新运行 git init ----> git add . ---> git commit -m ''暴露" ----> yarn eject

参考文章

成功之后就可以看到config文件夹和里面的webpack.config.js文件了，点到webpack.config.js文件里面做一些配置，把less加到文件里

第一步：在module.rules节点中找到 样式文件正则表达式style files regexes注释，添加less的正则

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//配置less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

 第二步：然后在样式加载器函数的loaders数组中添加less对象

const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'),
      },
      ...

 第三步：还需要在module模块的rules中模仿sass的写法加两个对象

//less配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),
              sideEffects: true,
            },

 然后再重新start一下就可以了

然后看到别的博文有更简单的方式，链接

在第一步的时候，不用新加一个less正则，直接修改一下cssRegex就行

// style files regexes
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

然后第二步相同，最后也是同样重新start一下就行

更新

使用以上方法确实可以顺利的导入less文件了，但是导入方式限于

import "./index.less"

这样的格式，如果想要使用

import styles from "./scroll.less"

就会报错找不到模块

【已声明“styles”，但从未读取其值 ts(6133)】

【找不到模块“./scroll.less”或其相应的类型声明 ts(2307)】

 解决这个问题的方法是在 react-app-env.d.ts 文件中添加

declare module '*.module.less' {
  const classes: { readonly [key: string]: string };
  export default classes;
}
declare module '*.less'

关于这个文件的具体解释=>在这