我正在使用Next.js、TS和SCSS。在每个app/*/page.tsx或components/*/page.tsx中，都有一行用于import style from "styles/*/index.module.scss"这样的样式表。我觉得这些队伍太长了。因此，我想将它们缩短为import style from "styles/*"，例如使用import module from "*"而不是import module from "*/index.ts"导入ts模块。有什么办法可以做到这一点吗？
我尽力了
// tsconfig.json
{
...
"paths": {
"@styles/*": ["./styles/*/index.moudle.scss"], // add this line
...
}
...
}
// app/**/page.tsx
import style from "@styles/login";
...，但是Next.js说的是Module not found: Can't resolve '@styles/login'。
TS也说了Cannot find module "@styles/login" ts(2307)。
1条答案
按热度按时间klr1opcd1#
在Next.js中，您可以在TypeScript配置（tsconfig.json）中使用路径别名为样式表创建更短的导入路径。以下是如何设置它：
1.打开tsconfig.json文件。
1.找到"paths"属性并为样式表添加一个条目。例如：{"compilerOptions "：{"baseUrl "："."，"路径"：{"@styles/*"：["style/*"]}}}
1.将更改保存到tsconfig.json文件。
1.现在您可以在代码中使用缩短的导入路径。例如：从"@styles/login "导入样式;
这将从styles/login目录导入index.module.scss文件。
确保在“路径”配置中指定的路径与样式表的实际文件路径相匹配。另外，确保样式表放置在相对于项目根目录的正确位置。
一旦设置了路径别名，Next.js应该能够正确解析模块，并且TypeScript应该不再显示“无法找到模块”错误。
注意：在对tsconfig.json文件进行更改后，您可能需要重新启动开发服务器以使更改生效。