初始化React应用

yarn create react-app my-app --template typescript

复制所有依赖文件和相应的依赖（webpack、babel等）到你的项目

cd my-app

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

添加less、less-loader依赖

yarn add less@3.12.2 less-loader@6.2.0

修改webpack.config.js配置文件，添加less-loader配置4

image-20210918095155242.png

在红框选中代码后面追加下面的代码

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

image-20210918095249343.png

在红框选中代码后面追加下面的代码

// Opt-in support for Less (using .less extensions).
// By default we support Less Modules with the
// extensions .module.less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      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, but using LESS
// using the extension .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

修改package.json文件，添加less忽略规则

image-20210918093043987.png

image-20210918093043987.png

修改react-app-env.d.ts文件，添加module定义配置

image-20210918095443038.png

在红框选中代码后面追加下面的代码

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

将项目src目录下面的css文件修改为less文件

结束

重新运行项目，引入less，发现是不是可以使用了