TS2307错误本质是TypeScript不认识.module.css文件,因缺少类型声明;需通过全局declare module、手动.d.ts声明或typescript-plugin-css-modules插件解决,并确保tsconfig.include覆盖、VS Code语言模式设为CSS Modules且重启TS Server。

TypeScript 报 TS2307 错误,本质不是你 import 写错了,而是它压根不认识 .module.css 这类文件——没有类型声明,TS 就当黑盒处理,连编译都过不去。
为什么 import './Button.module.css' 会报错?
TS 默认只解析 .ts/.d.ts/.js,遇到 .module.css 直接跳过类型检查,导致:
Cannot find module './Button.module.css' or its corresponding type declarations- 路径大小写不一致(比如文件是
button.module.css,却写了Button.module.css) -
tsconfig.json的include没覆盖到声明文件 - VS Code 的 TS Server 缓存没刷新,改了声明也不生效
最简方案:全局通配声明(适合快速启动)
在项目根目录或 src/ 下新建 globals.d.ts(必须是 .d.ts 后缀),只写一行:
declare module '*.module.css';
如需支持其他预处理器,追加对应行:
立即学习“前端免费学习笔记(深入)”;
declare module '*.module.scss';<br>declare module '*.module.sass';<br>declare module '*.module.less';
确保 tsconfig.json 的 include 包含该文件,例如:
"include": ["src/**/*", "globals.d.ts"]
⚠️ 注意:globals.ts 无效;这个方案能过编译,但 styles.xxx 不会自动补全类名。
精准方案:为每个 CSS 文件配同名 .d.ts
想让 styles.primary 有补全、拼写校验和跳转,就得手动写类型声明:
文件 Button.module.css 对应声明文件 Button.module.css.d.ts,内容如下:
declare module './Button.module.css' {<br> const classes: {<br> primary: string;<br> disabled: string;<br> 'icon-left': string; // 连字符类名必须加引号<br> };<br> export default classes;<br>}
关键约束:
- 文件名必须严格匹配:
Button.module.css.d.ts,不能是Button.module.css.ts或Button.css.d.ts - 每次增删 CSS 类,都得手动同步改这里
- Vite 默认能生成这类声明;Webpack 需确认
css-loader开启了exportLocalsConvention: 'camelCaseOnly'
推荐方案:用 typescript-plugin-css-modules 插件
兼顾智能补全与省力维护,不用手写一堆 .d.ts:
- yarn add -D typescript-plugin-css-modules
- 在
tsconfig.json的compilerOptions.plugins中添加:"plugins": [<br> { "name": "typescript-plugin-css-modules" }<br>] - VS Code 中右键点击
.module.css文件 → “Change Language Mode” → 选 “CSS Modules”,否则插件不生效
这个插件会自动推导类名、支持跳转、校验拼写,且无需手动维护声明文件。但要注意:它依赖 VS Code 的语言服务识别正确,光装插件不设语言模式,照样没提示。
最容易被忽略的点是 VS Code 的语言模式设置和 TS Server 缓存刷新——改完声明或插件配置后,务必重启 TS Server(Ctrl+Shift+P → “TypeScript: Restart TS server”),否则一切白搭。


















