javascript 如何在Next.js中导入没有文件扩展名的样式?

btxsgosb  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(145)

我正在使用Next.js、TS和SCSS。在每个app/*/page.tsxcomponents/*/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)

klr1opcd

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文件进行更改后,您可能需要重新启动开发服务器以使更改生效。

相关问题