WebStorm 能否正确运行 CSS Modules 的样式隔离，取决于它是否真正“理解”你的构建配置——不是靠猜，而是靠你明确告诉它：哪些 CSS 文件是模块、类名怎么生成、类型信息从哪来。
Webpack 配置必须匹配 WebStorm 的解析逻辑
WebStorm 不读 tsconfig.json 或 .babelrc，只认你指定的 Webpack（或 Vite）配置路径和其中的 css-loader 选项。哪怕项目跑起来样式正常，IDE 仍可能当它是普通 CSS 处理。
-
test正则必须严格匹配/\.module\.css$/（注意双反斜杠），不能写成/\.modules\.css$/或/\.css$/ -
modules选项不能只是true，推荐显式写成{ mode: 'local' }，避免 WebStorm 解析时 fallback 到旧模式 - 如果用 PostCSS，
postcss-loader必须放在css-loader之后，否则localIdentName可能被覆盖 - Vite 用户注意：
vite.config.ts必须导出为 CommonJS 格式（module.exports = {...}）或 ESM 兼容格式，否则 WebStorm 加载失败
WebStorm 设置里填错路径就等于没配
Settings → Languages & Frameworks → Style Sheets → CSS Modules 中的 Webpack configuration file 栏，填的是**绝对路径**，不是相对路径，也不是 “webpack.config.js” 这种字符串。
- 路径必须指向实际可执行的配置文件，比如
/Users/you/project/webpack.config.js，不能漏掉项目根目录 - CRA 未 eject 时默认支持，但一旦自定义了配置（哪怕只是加了个 alias），就必须手动填对路径
- 填完后点 Apply，然后重启 WebStorm —— 缓存不清理，新配置不会生效
- 如果路径正确但提示 “Invalid webpack configuration”，检查该文件是否在 Node 环境下能被
require()成功，尤其是 ES module 语法（export default）在旧版 WebStorm 中可能报错
TypeScript 类型补全依赖插件，不是 IDE 自动推导
即使 WebStorm 知道这是 CSS Modules，styles.xxx 在 TSX 里不提示，90% 是因为 TypeScript 没拿到具体键名类型。WebStorm 的补全是靠 TS 语言服务返回的，不是自己解析 CSS 文件。
Galileo TypeScript sdk
下载
完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。
- 必须安装
typescript-plugin-css-modules（npm install -D typescript-plugin-css-modules） -
tsconfig.json中compilerOptions.plugins必须包含：{ "name": "typescript-plugin-css-modules" } - WebStorm 的 TypeScript 设置（Settings → Languages & Frameworks → TypeScript）中，Node interpreter 和 TS Config path 必须指向项目本地版本，不能用 bundled 版本
- 如果用了
declare module '*.module.css'手动声明，确保它被tsconfig.json的include覆盖到，否则类型不生效
文件命名和导入方式稍错就失效
WebStorm 对文件名和导入语法极其敏感，一个字符偏差就会降级为全局 CSS 处理。
立即学习“前端免费学习笔记（深入）”；
- 文件名必须是
xxx.module.css（或.module.scss/.module.less），index.module.css理论上合法，但某些 WebStorm 版本会因缓存机制误判为非模块 - 不能写成
xxx.modules.css、xxx.css、xxx.module.scss（少个点）——这些都不会触发模块识别 - 导入语句必须是
import styles from './Button.module.css'，不能用import * as styles from，后者 TypeScript 推不出键名 - 如果组件里用了
classNames或动态拼接类名（如styles[`${prefix}__item`]），WebStorm 补全会失效，这是设计限制，不是 bug
最常被忽略的一点：WebStorm 的 CSS Modules 支持是“静态感知”，它不运行构建过程，只解析配置和文件结构。所以哪怕你在终端里 npx webpack 能打出带 hash 的类名，IDE 里没提示，问题一定出在配置路径、文件命名或 TS 插件链上，而不是构建结果本身。
