vue 3 sfc中css modules通过启用，类名自动哈希隔离，并通过$style对象在模板或script setup中安全引用，不可与scoped共用。

在 Vue 3 单文件组件（SFC）中使用 CSS Modules，核心是通过 <style module></style> 声明样式块，让类名自动哈希化、作用域隔离，并通过 $style 对象在模板或脚本中安全引用。

启用 CSS Modules 的基本写法

只需在 <style></style> 标签上添加 module 属性：

• 纯 CSS：
• 配合预处理器（如 SCSS）：
• 注意：不能同时写 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></style> 块，或用 :global()（仅限 scoped 场景）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！