CSS Modules 是主流稳妥的模块化方案，构建时哈希隔离类名、零运行时开销；Webpack 需 css-loader 开启 modules: { mode: ‘local’ } 且文件名含 .module.css，Vite 原生支持；@import 已弃用，因其阻塞加载、无法参与构建、无作用域；常见错误包括后缀缺失、混用 scoped 与 Modules、动态拼接类名不当；它仅解决作用域隔离，不处理复用、主题、响应式等，需搭配 Sass/CSS 变量等补充。
CSS Modules 是当前最主流、最稳妥的模块化引入方式，尤其在 React/Vue 项目中几乎成为标配。 它不依赖运行时库，构建时完成类名哈希隔离，零额外体积、无运行时开销，且与框架生态无缝衔接。其他方案（如 CSS-in-JS 或 BEM）各有适用场景，但若你只想选一种“开箱即用、团队易对齐、长期维护成本低”的方式，Button.module.css + import styles from './Button.module.css' 就是答案。
怎么启用 CSS Modules（Webpack / Vite 场景）
不用手写 loader 配置——现代构建工具已高度封装：
- Webpack：只需在
css-loader中开启modules: true（推荐用modules: { mode: 'local' }），配合style-loader（开发）或MiniCssExtractPlugin（生产）；文件名必须含.module.css后缀才触发模块化 - Vite：原生支持，无需配置。只要文件名是
xxx.module.css，import styles from './xxx.module.css'就自动启用；普通.css则走全局注入 - 注意：CSS Modules 的类名映射只存在于 JS 模块内，
styles.button是合法的，但直接在 HTML 模板里写class="button"不会生效
为什么不用 @import？它看起来更“纯 CSS”
@import 是 CSS 原生语法，但**在模块化工程中它早已被弃用**，原因很实际：
- 加载阻塞：浏览器串行解析
@import，每个都可能触发新请求，拖慢首屏渲染 - 无法参与构建流程：Webpack/Vite 无法识别
@import中的路径依赖，导致 HMR 失效、Tree Shaking 失效、样式重复打包 - 作用域为零：导入的样式仍是全局污染，完全违背模块化目标
- 替代方案明确：预处理器用
@use（Sass）或@forward，JS 端统一用import—— 更可控、可调试、可拆分
常见错误：样式没生效 or 类名还是原始字符串
这不是 bug，而是配置/命名没对上：
