使用TypeScript编译时Vite ?inline导入查询报错求助

用Vite的import rawCss from "./MyComponent.m.css?inline"导入原始CSS时，项目运行正常，但执行pnpm type:check时出现TS2307错误，提示找不到模块或对应类型声明。已在vite-env.d.ts中引入vite/client类型，IDE能正常识别，但类型检查仍失败。

原因与解决方法 #

1. 确保TypeScript加载vite-env.d.ts #

检查tsconfig.json的include配置，确认包含vite-env.d.ts文件：

{
  "include": ["src/**/*", "vite-env.d.ts"]
}

如果TypeScript未读取该文件，vite/client中的模块声明就不会生效。

2. 显式补充CSS inline的类型声明 #

在vite-env.d.ts中添加针对.m.css?inline的类型声明，避免模块匹配歧义：

/// <reference types="vite/client" />

// 针对.m.css?inline的专属声明
declare module '*.m.css?inline' {
  const content: string;
  export default content;
}

// 或者用通用声明覆盖所有CSS后缀+inline参数的情况
// declare module '*?.css?inline' {
//   const content: string;
//   export default content;
// }

3. 配置适配Vite的模块解析策略 #

在tsconfig.json的compilerOptions中设置moduleResolution为bundler（TypeScript 5.0+推荐）或node16/nodenext，让TypeScript适配Vite的模块解析规则：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ESNext",
    "module": "ESNext"
  }
}

4. 清除TypeScript缓存 #

缓存可能导致类型声明未更新，执行以下命令后重新检查：

rm -rf node_modules/.cache
pnpm tsc --clearCache
pnpm type:check

不推荐临时方案的原因 #

创建实际的MyComponent.m.css?inline文件不符合Vite设计逻辑：?inline是Vite的构建语法，并非真实文件名，这种做法会增加文件管理负担，还可能引发其他构建问题。

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