必须同时满足声明存在、插件启用、vscode语言服务识别正确三件事，否则ts将.styles视为any，导致无补全、无法跳转；核心是ts不知.module.css导出结构，需declare module声明+typescript-plugin-css-modules插件+手动设语言模式为css modules。
直接加 declare module 声明文件就能让 TypeScript 认出 .module.css 导出结构，但只声明还不够——IDE 提示、跳转、类型校验要全部生效，必须同时满足三件事：声明存在、插件启用、VSCode 语言服务识别正确。
为什么 import styles from './Button.module.css' 没有类型提示
不是插件没装，而是 TypeScript 根本不知道这个文件导出了什么。默认情况下，TS 把 .css 当作未知模块，styles 就是 any。常见现象包括：
Property 'container' does not exist on type '{}'- 输入
styles.后无补全，只显示toString等原型方法 - 右键点击类名无法“Go to Definition”
核心原因只有两个：缺少模块声明，或声明了但没被 TS 加载（比如路径不在 include 里，或文件后缀不匹配）。
必须添加的 declare module 声明文件
在项目任意位置（推荐 src/types/css-modules.d.ts 或 src/custom.d.ts）创建声明文件，内容严格按后缀匹配：
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.module.less' {
const classes: { [key: string]: string };
export default classes;
}
注意点：
- 文件名必须以
.d.ts结尾，且不能是.ts -
tsconfig.json的include字段必须包含该文件，例如："include": ["src/**/*", "src/types/**/*"] - 如果用的是
.module.scss却只声明了.module.css，提示依然不会出现
typescript-plugin-css-modules 插件启用与配置
仅靠声明文件能解决基础类型推导，但无法实现类名级自动补全和拼写错误实时报错——这需要 typescript-plugin-css-modules。
- 安装：
npm install -D typescript-plugin-css-modules - 在
tsconfig.json中加入插件配置："compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } - 重启 VSCode（执行
Developer: Reload Window），并确认右下角 TypeScript 版本显示为 Workspace version - 如需类名转驼峰（
btn-primary→btnPrimary），加配置："classnameTransform": "camelCase"
该插件会动态扫描所有 .module.* 文件，提取真实类名生成运行时类型，比静态声明更精准，也支持 composes 的简单链式推导（但不处理跨文件 composes）。
VSCode 侧必须检查的三项设置
即使声明和插件都对了，VSCode 仍可能不工作，因为它的 CSS 语言服务默认不处理 .module.css：
- 打开任意
.module.css文件，右下角语言模式必须是 CSS Modules（不是 CSS 或 Plain Text）；若没有，点击切换并选择 “Configure 'CSS Modules' language mode” - 确保工作区
.vscode/settings.json中启用了 CSS Modules 支持："cssModules.enabled": true - 禁用可能劫持 CSS 语言服务的扩展，比如某些 Tailwind 插件会覆盖默认解析逻辑
最后提醒：所有 :global(...) 和 composes 引用的类名都不会出现在 styles 的提示列表中——它们是构建时行为，不是导出属性，类型系统无法静态捕获。别指望插件能“猜”出 composes 链，那是 webpack/css-loader 的事，不是 TS 的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
