Vue 3 SFC中CSS Modules通过<style module>启用，类名自动哈希隔离，并通过$style对象在模板或script setup中安全引用，不可与scoped共用。
在 Vue 3 单文件组件（SFC）中使用 CSS Modules，核心是通过 <style module> 声明样式块，让类名自动哈希化、作用域隔离，并通过 $style 对象在模板或脚本中安全引用。
启用 CSS Modules 的基本写法
只需在 <style> 标签上添加 module 属性：
- 纯 CSS：<style module> .btn { color: blue; } </style>
- 配合预处理器（如 SCSS）：<style lang="scss" module> .btn { color: blue; } </style>
- 注意：不能同时写
scoped和module，否则scoped会被忽略
在模板中使用生成的类名
CSS Modules 编译后会把 .btn 转为类似 btn__abc123 的唯一类名，并挂载到组件实例的 $style 对象上：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 模板中直接绑定：
<button :class="$style.btn">点击</button> - 支持多个类：
:class="[$style.btn, $style.primary]" - 可与普通类共存：
:class="[$style.btn, 'is-large']"
在 script setup 中访问样式对象
使用组合式 API 时，$style 是响应式计算属性，也可显式导入（需搭配 .module.css 文件）：
立即学习“前端免费学习笔记（深入）”；
- 内联写法（推荐）：
<script setup> const btnClass = $style.btn </script> - 外部模块导入（需单独建
Button.module.css）：import styles from './Button.module.css' - 注意：
$style只在组件实例上下文中可用，不能在setup()外部或非响应式函数中直接解构使用
常见问题与注意事项
实际使用中容易踩坑的地方：
- 写了
module但类名没哈希化？检查是否漏了lang属性（如用 SCSS 却没写lang="scss"），并确认已安装对应 loader（如sass和sass-loader） - 样式未生效？确保模板中用的是
:class绑定，而不是直接写class="xxx"—— 后者会绕过模块化映射 - 需要全局覆盖第三方组件样式？CSS Modules 本身不提供穿透机制，此时应另起一个非
module的<style>块，或用:global()（仅限scoped场景）
