使用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

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