移动CSS模块文件夹后TypeScript报找不到模块或类型声明错误如何解决

报错原因 #

• TypeScript 本身默认仅识别代码类后缀文件，没有内置对 .module.css 这类CSS Module文件的类型识别规则，需要额外的类型声明告知TypeScript如何处理该类文件的导入
• 你当前的tsconfig.json中include配置仅匹配了.ts后缀文件，缺失了对.d.ts类型声明文件、.tsx React组件文件的匹配规则，即使项目内存在CSS Module的类型声明，也无法被TypeScript加载
• 样式文件移动后，原路径关联的类型声明匹配规则失效，而该报错仅为TypeScript静态检查阶段的错误，实际运行时打包工具会处理CSS文件导入，因此不影响代码正常运行

修复方案 #

• 第一步：在项目src目录下新建global.d.ts类型声明文件，写入以下内容，声明CSS Module的类型规则：

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

// 若项目使用less、scss等预处理器，可补充对应声明
// declare module '*.module.less' {
//   const classes: { [key: string]: string };
//   export default classes;
// }

• 第二步：修改tsconfig.json的include配置，增加对类型声明文件、tsx文件的匹配：

"include": [
  "./**/*.ts",
  "./**/*.tsx",
  "./**/*.d.ts"
]

• 第三步：可选检查项：确认你代码中导入样式的路径大小写和实际文件完全一致，你的配置开启了forceConsistentCasingInFileNames，大小写不匹配也会触发该报错
• 配置修改完成后如果仍有报错，重启IDE的TypeScript服务即可生效，以VS Code为例：按下快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），选择「TypeScript: Restart TS Server」执行

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh