1.创建ts项目

create-react-app app --template typesctipt

2.配置别名

在修改react配置的时候一般不推荐使用npm run eject来暴露配置文件，因为这是不可逆转的，但是要同时配置less module和别名就不得不暴露配置文件

通常我们都是使用craco这个库配置别名，使用react-app-rewired库来配置css module，但是他们都是要求修改packjson中的scripts的脚本，这就冲突了，所以只能暴露配置文件（注意暴露文件时必须先把.git文件删除或者提交代码）

暴露配置文件后，一切操作都在配置文件中了

找到webpack.config.js，找到alias配置项

添加配置

"@": path.resolve(__dirname, "../src")

为了写代码方便可以在根目录下新建path.tsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

另外，导入less还会报错，在根目录的react-app-env.d.ts加入

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

记得在tsconfig.json中添加一行

到此，别名配置完成，并且还有提示，十分方便

3.配置less-module

先下载两个东西

npm i less less-loader -S

找到刚才的webpack.config.js文件因为react本身提供了css-modul和scss-module，所以我们照猫画虎就行了

在下面添加两行

const lessRegex = /\.less$/; //这一句和下一句是新增的less的配置
const lessModuleRegex = /\.module\.less$/;

还没完，还要找到loader的配置

在sass旁边贴上

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: "icss",
      },
    },
    "less-loader"
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: "local",
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    "less-loader"
  ),
},

大工告成！现在可以使用了

react18+ts中配置别名和使用less module

1.创建ts项目

2.配置别名

3.配置less-module