craco别名配置

craco版本：6.3.0

1.安装craco-alias

yarn add craco-alias

2.craco.config.js配置

const CracoAlias = require("craco-alias");
const WebpackBar = require("webpackbar");
const path = require("path");
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "options",
        baseUrl: "./",
        aliases: {
          "@mui/styled-engine": "./node_modules/@mui/styled-engine-sc",
        },
      },
    },
  ],
  webpack: {
    alias: {
      "@": path.resolve("src"),
    },
    plugins: [new WebpackBar()],
  },
};

3.tsconfig.json配置

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

4.你以为结束了？？？？

当运行代码时，tsconfig.json会被重置，你配置的paths会重置掉，然后报错。

推荐新建文件tsconfig.path.json

// tsconfig.path.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@svg/*": ["src/assets/svg/*"],
      "@img/*": ["src/assets/images/*"],
      "@icons/*": ["src/assets/icons/*"],
      "@shared/*": ["src/shared/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@constants/*": ["src/constants/*"],
      "@layout/*": ["src/layout/*"],
      "@services/*": ["src/services/*"]
    }
  }
}

tsconfig.json引入下面的文件

{
  "extends": "./tsconfig.path.json",
  "compilerOptions": {
  },
}