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”），否则一切白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
