CSS Modules生效取决于构建工具配置而非VSCode：Vite默认启用需文件名含.module.css，Webpack须在css-loader中设modules: true，否则类名不会哈希化。
VSCode 本身不处理 CSS Modules，它只是编辑器；真正实现 CSS Module 局部作用域的是构建工具（如 Webpack、Vite、Rollup），Node.js 环境只负责运行这些工具。你在 VSCode 里配错地方，比如改 launch.json 或装错插件，根本不会影响 CSS Module 是否生效。
为什么改了 package.json 的 "type": "module" 还是没用
CSS Modules 和 Node 的模块系统（CommonJS/ESM）是两套机制：前者靠构建工具解析 .module.css 文件并生成带哈希的类名，后者控制 require() 或 import 行为。强行在 package.json 里加 "type": "module" 只会影响 JS 模块解析，对 CSS 文件完全无感——Webpack/Vite 读取 CSS 不走 Node 的模块加载链。
- 如果你用 Vite，CSS Module 默认启用，只需文件名带
.module.css（如Button.module.css），然后import styles from './Button.module.css' - 如果你用 Webpack，必须在
webpack.config.js里配css-loader并开启modules: true，否则.module.css就当普通 CSS 处理 - VSCode 不会报 CSS Module 相关错误，但如果你 import 路径写错，TS/JS 语言服务会标红线——这跟模块类型无关，纯路径解析问题
import styles from './xxx.module.css' 报错“Cannot find module”
这不是 Node 找不到 CSS 文件，而是 TypeScript/JavaScript 语言服务不认识 .module.css 类型。VSCode 依赖 @types/node 和项目里的类型声明来提示，而默认不包含 CSS Module 的类型定义。
- 在项目根目录加
src/declarations.d.ts（或任意.d.ts文件），写入：declare module '*.module.css' { const classes: { [key: string]: string }; export default classes; } - 确保
tsconfig.json的"include"包含该声明文件（例如"include": ["src/**/*"]） - 如果用 JS 而非 TS，VSCode 仍可能报错，此时可在 import 行上方加
// @ts-ignore临时绕过（不推荐长期用）
VSCode 里预览 CSS Module 生效效果？别想太多
VSCode 没有实时渲染能力，也无法模拟构建后的类名哈希。你看到的 styles.button 在编辑器里只是字符串，它到底映射到 Button_button__abc123 还是 button，只有运行 vite build 或 webpack serve 后打开浏览器开发者工具才能确认。
立即学习“前端免费学习笔记（深入）”；
- 检查是否生效的唯一可靠方式：启动开发服务器（
npm run dev），打开浏览器，右键元素 → “检查”，看 class 名是否带哈希 - 不要依赖 VSCode 插件（如 “CSS Modules”）来“高亮局部类名”——它们只是正则匹配文件名，不解析实际作用域
- 如果发现所有类名都没哈希、全变成全局，大概率是构建配置漏了
modules: true或文件没按.module.css命名
真正容易被忽略的点：CSS Module 的作用域边界由构建工具决定，不是文件后缀也不是 import 写法。哪怕你写成 import './index.module.css'，如果构建配置没开 modules，照样全局；反过来，Webpack 里把 .css 文件也配成 modules，它就局部。VSCode 只负责把代码“显示出来”，不参与这个决策。
