TS+VUE3+SCSS为什么@/..路径引用找不到模块“../variables.scss”或其相应的类型声明?
用了TS+ESlint+vue,在项目中不管用@/
还是../../都会报路径引用找不到模块“../variables.scss”或其相应的类型声明
,查了百度都说是TS不认识.ts以外的文件,需要去配置.d.ts 或者 tsconfig.json文件,我的配置如下,我的疑问是 "@/": ["src/"]这样配置了,该文件下都应该不校验才对吧,那个老哥解答一下呢,卡一天了
// .d.tsdeclare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}
// tsconfig.json{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": false,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": ["src/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src",
".d.ts"
],
"exclude": [
"node_modules/**/*"
]
}
回答:
你用的vite还是vue-cli?脚手架里也需要配置alias
回答:
1.“TS不认识.ts以外的文件” 这个说法是错误的。这里的 TS 准确说是 tsc 也就是 TS 的编译器,它能认识 .ts 和 .d.ts 文件,它会自动读取整个工程下 .d.ts 文件来作为类型声明。
2.不知道你是用的什么脚手架创建的项目,猜测是 @vue/cli。因为 vite 的话,它自动就认识 .scss,不需要你特别处理。可以试着为 .scss 进行声明,在 .d.ts 文件中:
declare module '*.scss' { const css: string
export default css
}
declare module '*.sass' {
const css: string
export default css
}
3.建议重新使用 vite 脚手架来创建 ts 的项目。
以上是 TS+VUE3+SCSS为什么@/..路径引用找不到模块“../variables.scss”或其相应的类型声明? 的全部内容, 来源链接: utcz.com/p/932981.html