CSS Modules 类名不提示的根源是 WebStorm 未正确识别模块作用域，需确保 webpack/vite 配置启用 modules、文件名严格为 xxx.module.css、IDE 中指定正确配置路径，并配置 typescript-plugin-css-modules 插件及清理缓存。
CSS Modules 类名不提示？大概率是 WebStorm 没识别出模块作用域，不是插件没开，也不是代码写错了。
Webpack 配置必须启用 modules 且文件名严格匹配
WebStorm 依赖 Webpack 的实际配置来推断 CSS 文件是否为 Modules。它不会自己猜，也不会读 tsconfig 或 babel 配置。
- 确保
webpack.config.js（或 CRA/Vite 默认配置）中css-loader启用了modules: true或modules: { mode: 'local' } - 文件名必须是
xxx.module.css（或.module.scss、.module.less），不能是xxx.css、xxx-modules.css、index.module.css（后者虽可导入但易触发 IDE 解析异常） - 如果用 Vite，确认
vite.config.ts中css.modules未被显式关闭（默认开启）
WebStorm 设置里必须指定 webpack 配置路径
光有 Webpack 配置还不够，WebStorm 得知道去哪儿找它。否则它会按普通 CSS 处理，类名当全局字符串处理，自然不提示。
- 打开
Settings → Languages & Frameworks → Style Sheets → CSS Modules - 勾选
Enable CSS Modules support - 在
Webpack configuration file栏填入项目根目录下的完整路径，例如：webpack.config.js或vite.config.ts（注意：Vite 项目也支持填vite.config.ts，但需确保导出是 CommonJS 或 ESM 兼容格式） - 若使用 CRA，通常无需手动指定，但若 eject 过或自定义了配置，就必须填对路径
类名导入后仍无补全？检查 TypeScript 类型是否生成
即使 WebStorm 知道这是 Modules，JSX/TSX 里 styles.xxx 能否提示，取决于 TypeScript 是否能推导出 styles 的具体键名。默认类型是 { [key: string]: string }，IDE 拿不到具体类名。
立即学习“前端免费学习笔记（深入）”；
- 如果是 TS 项目，必须安装
typescript-plugin-css-modules并在tsconfig.json中配置compilerOptions.plugins - VSCode 用户常做这事，但 WebStorm 同样依赖这个插件——它通过 TypeScript 语言服务提供补全，不是靠 IDE 自己解析 CSS 文件
- 确保 WebStorm 使用的是项目本地的 TypeScript 版本（
Settings → Languages & Frameworks → TypeScript中检查Node interpreter和TS Config路径） - 重启 WebStorm 或执行
File → Invalidate Caches and Restart，否则旧缓存可能让类型声明不生效
常见失效信号和绕过判断法
别只盯着“没提示”三个字。有些现象比提示本身更能说明问题根源：
- 在
.module.css文件里写.button {，按Ctrl+Space能弹出属性补全 → 说明 CSS 支持正常，问题出在作用域识别或类型上 -
import styles from './Button.module.css'后，styles.按Ctrl+Space只显示toString、constructor→ 表明 TypeScript 没注入模块类型，typescript-plugin-css-modules未生效或路径错 - 右键
Button.module.css→Go to Declaration跳转失败 → WebStorm 根本没把它当 Modules 文件，优先查文件名和 Webpack 路径设置 - 改完配置后没反应？别只重启编辑器窗口，要
Invalidate Caches—— WebStorm 对 CSS Modules 的索引是持久化缓存的，不清理就永远卡在旧状态
最麻烦的其实是类型生成和 IDE 缓存的双重延迟：改了 tsconfig，但 WebStorm 没重载 TS 服务；清了缓存，但没重启语言服务。这两步缺一不可，而且顺序不能反。
