TS+VUE3+SCSS为什么@/..路径引用找不到模块“../variables.scss”或其相应的类型声明?

用了TS+ESlint+vue,在项目中不管用@/还是../../都会报路径引用找不到模块“../variables.scss”或其相应的类型声明,查了百度都说是TS不认识.ts以外的文件,需要去配置.d.ts 或者 tsconfig.json文件,我的配置如下,我的疑问是 "@/": ["src/"]这样配置了,该文件下都应该不校验才对吧,那个老哥解答一下呢,卡一天了

// .d.ts

declare 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

回到顶部