VSCode 默认不识别 CSS Modules 的模块导出结构，styles 被视为普通对象，无法推断类名；根本原因是类型信息缺失，需通过声明模块或插件生成类型定义来解决。

为什么 import styles from './Button.module.css' 没有类名提示？

VSCode 默认不识别 CSS Modules 的模块导出结构，styles 被当成普通对象，无法推断其键（即类名）来自 CSS 文件内容。本质是类型信息缺失，不是插件没装全。

核心解法只有两条路：让 TypeScript 知道 CSS 文件导出什么，或者让 VSCode 插件实时解析 CSS 并注入补全项。

• 推荐优先用 declare module '*.module.css' 声明 + css-modules-typescript-loader 或 @types/css-modules 配合，这样类型安全且提示稳定
• 若项目没用 TypeScript，可装插件 CSS Modules Extensions（作者：clinyong），它会在保存时扫描 .module.css 文件并生成临时 __generated__.d.ts，但需确保工作区根目录有 tsconfig.json 或 jsconfig.json
• 注意：VSCode 内置的 CSS 语言服务对 module.css 后缀默认关闭，需在 settings.json 中显式启用："css.validate": false（避免报错干扰） + "css.modules": true（部分旧版本需此配置，新版已自动识别）

composes 和 :global 类名为什么不提示？

CSS Modules 的 composes 和 :global 是运行时行为，VSCode 插件或类型声明无法静态分析跨文件依赖或全局作用域注入——它们根本不会出现在 styles 对象的键里。

这意味着：styles.base 可能 composes 了 reset，但 styles.reset 不会出现在提示列表中；:global(.btn) 定义的样式也不会被当作 styles.btn 补全。

立即学习“前端免费学习笔记（深入）”；

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 解决 composes 提示：把被复用的类单独抽成独立 .module.css 文件，并确保其被 declare module 正确覆盖，再通过命名空间方式导入（如 import base from './base.module.css'）
• 规避 :global 提示缺失：尽量少用，改用 data- 属性或 styled-components / Emotion 等支持运行时样式的方案
• 不要依赖插件“猜” composes 链，目前无成熟实现；强行扫描会严重拖慢大型项目索引

React + Vite 项目里 CSS Modules 提示失效怎么办？

Vite 默认不生成类型声明，且开发服务器启动快、不触发完整类型检查，导致 TS Server 无法及时加载 CSS 模块定义。

关键动作不是重装插件，而是让 Vite 和 TS 协同暴露类型：

• 在 vite.config.ts 中启用 css.modules.generateScopedName（非必需，但统一命名规则利于调试）
• 创建 src/env.d.ts，写入：

  declare module '*.module.css' {
    const classes: Record<string, string>;
    export default classes;
  }

  —— 这比全局 @types/css-modules 更轻量、更可控
• 重启 TS Server：快捷键 Ctrl+Shift+P → 输入 “TypeScript: Restart TS server”，否则修改声明文件不生效
• 确认 tsconfig.json 的 include 包含 src/**/*，否则 env.d.ts 不会被加载

智能提示偶尔卡住或类名消失？检查这三处

这不是 VSCode 崩溃，而是 CSS 模块解析链某环中断。高频原因集中在路径、大小写、缓存三方面。

• Button.module.css 和 import 语句中的路径必须完全一致（包括大小写），Windows 下常因忽略大小写误判，Linux/macOS 会直接失败
• 删除 node_modules/.vite 和 node_modules/.cache（Vite）或 .next（Next.js），旧缓存可能固化错误的模块映射
• VSCode 设置中关闭 "typescript.preferences.includePackageJsonAutoImports": "auto"，该选项有时会干扰 CSS 模块的模块解析优先级

最隐蔽的问题：CSS 文件里写了注释或空行在第一行，某些老版本插件会跳过解析。把 .module.css 第一行改成实际选择器即可验证。