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

Question

用了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/**/*"
  ]
}

Answer 1

你用的vite还是vue-cli?脚手架里也需要配置alias

Answer 2

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 的项目。