VSCode+TypeScript中CSS/SCSS等文件导入无IntelliSense求助

1. 添加TypeScript类型声明文件 #

TypeScript默认不识别CSS、SCSS、SVG这类非TS/JS文件，需要通过类型声明文件明确这些文件的导入规则：

• 在项目根目录或src文件夹下创建types目录，新建custom.d.ts文件（后缀必须为.d.ts）
• 写入以下声明代码，根据你的项目需求调整：

  // CSS文件类型声明
  declare module '*.css' {
    const classes: { [key: string]: string };
    export default classes;
  }
  
  // SCSS文件类型声明
  declare module '*.scss' {
    const classes: { [key: string]: string };
    export default classes;
  }
  
  // SVG文件类型声明（适配Vite默认的SVG导入规则，支持组件和路径两种导出）
  declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
  }
  

• 确保tsconfig.json的include字段包含这个类型文件路径：

  {
    "include": [
      "src/**/*",
      "types/**/*.d.ts"
    ]
  }
  

2. 调整VSCode设置（可选） #

如果添加类型声明后仍无提示，检查以下VSCode配置：

• 打开设置（快捷键Ctrl+,），搜索typescript.suggest.paths，确保选项处于开启状态
• 搜索typescript.preferences.importModuleSpecifier，建议设置为shortest，优化导入路径的提示逻辑

3. 确认Vite插件的类型支持 #

确保项目已安装@vitejs/plugin-react或@vitejs/plugin-react-swc，这两个插件会自动适配React+TS项目的类型配置，辅助VSCode识别非代码文件的导入逻辑。

完成以上操作后，VSCode的IntelliSense就能正常识别CSS/SCSS/SVG等文件的导入路径和导出内容了。

内容的提问来源于stack exchange，提问作者eakl