找了一天的资料，终于成功配置了react app+ts+less

一、ts+less+react app配置

首先配置ts环境下的react-app

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

配置less环境

注意事项：因为less-loader版本过高无法兼容getOptions函数方法，需要降级，不超过V5.0.0。不然很可能报错。

npm install less less-loader@5.0.0 --save-dev

// 或者使用yarn
yarn add less less-loader@5.0.0 --dev

通过yarn eject暴露webpack.config.js配置

需要先提交本地的git修改，才能暴露

npm run eject

在config/webpack.config.js文件里配置less-loader相关内容

// 配置变量
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 在上边的配置下增加下面两行less的配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

//在oneof数组中添加less配置，参考sass写法
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      modules: true,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

尝试在项目引用less文件，再通过yarn start启动

import styles from './index.module.less'

function LessBox() {
  return (
    <div className={styles.lessWrap}>
     lesswrap
    </div>
  )
}

如果启动报错，Cannot find module ‘./index.module.less‘ or its corresponding type declarations. TS2307，需要在react-app-env.d.ts中进行添加。

//react-app-env.d.tsx 在src下面一级
declare module "*.less" {
  const content: { [className: string]: string };
  export default content;
}

如果缺少工程文件，注意运行yarn重新安装一次