tsconfig.json 使用别名进行导入不起作用

Question

我有反应 ts 的项目。 最近我尝试对我的导入使用别名。 因此，为此我使用以下参数编辑了我的文件 tsconfig.json ：

tsconfig.json

我在我的文件中更改我的路径导入，如下所示：

import { couleurQualite } from "../../utils/coloration";

至

import { couleurQualite } from "@utils/coloration";

当我在导入 IDE 时移动光标时显示： IDE 解析路径

所以在这个地方我没有任何错误。 但是当我用 cmd 启动我的项目时： npm run start

我收到这些错误

Module not found: Error: Can't resolve '@utils/coloration' in '/home/YYYY/XXXX/XXXX/XXXX/XXXX/src/components/items'

ERROR in ./src/components/items/ItemBadge.tsx 11:0-51

Module not found: Error: Can't resolve '@utils/coloration' in '/home/YYYY/XXXX/XXXX/XXXX/XXXX/src/components/items'

webpack compiled with 1 error

这是我的项目结构：

项目结构

有人可以帮助我吗？

Answer 1

最后它工作了，感谢@TmTrom 你的回答让我走上了正确的道路。

一些精度：使用 create-react-app，我不能直接编辑 webpack.config.js，所以我发现这有相同的结果。

1. 添加所需模块
2. 创建 config-overrides.js 并向其中添加信息：

addWebpackAlias({
        ['@customName']: path.resolve(__dirname, 'src/directory')
    })

你也可以试试这个来重写 webpack

这两种情况对我有用

编辑：您还可以编辑文件 webpack.config.js，他位于：node_modules/react-scripts/config/webpack.config.js

在此选项中，您不需要安装任何其他模块。