vue单文件组件启用css modules需在标签添加module属性并指定lang（如scss），不可与scoped共用；编译后通过$style（vue 2）或usecssmodule()（vue 3）访问驼峰式类名，模板中用:class="$style.classname"绑定。

Vue单文件组件里怎么启用CSS Modules Vue CLI创建的项目默认支持CSS Modules，不需要额外安装插件。关键在<style></style>标签上加module属性，且必须指定lang（如scss或css），否则module会被忽略：

<style module lang="scss">
.example {
  color: red;
}
</style>

注意：不能写成<style scoped module></style>——scoped和module互斥，二者选一。用了module，样式就不再全局作用，而是通过JS对象注入，天然“局部化”。

如何在模板中绑定CSS Modules生成的类名 <style module></style>编译后会生成一个名为$style的响应式对象（Vue 2）或styles（Vue 3 Composition API），它把类名映射为驼峰式键名：

比如.user-card → $style.userCard；.is-active → $style.isActive

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

绑定方式分两种场景：

• 静态绑定：:class="$style.userCard"
• 动态绑定（推荐用对象语法）：:class="{ [$style.userCard]: true, [$style.isActive]: isActivated }"
• 数组语法也支持：:class="[$style.userCard, isActivated ? $style.isActive : '']"，但注意空字符串不会被过滤，可能产生无效class

Vue 3 + setup()中需显式解构：const styles = useCssModule()，然后用styles.userCard。

为什么:class里直接写$style.xxx有时不生效 常见原因有三个：

• 忘记在<style></style>上加module属性，导致$style为空对象
• 类名含非法字符（如.、#、空格），CSS Modules只处理合法标识符，.btn-primary可转，但[data-test]或.a.b不会进入$style
• Vue 2中$style不是响应式代理，若在data里直接引用$style.xxx再赋值给变量，后续更新类名不会自动同步——应始终在模板中直接调用$style.xxx或在computed中返回对象

另外，Sass嵌套规则（如.parent { .child {} }）中的子选择器不会被提取进$style，只有顶层类名有效。

和普通scoped样式混用要注意什么 不能在同一组件里同时用<style scoped></style>和<style module></style>来覆盖同一类名——它们编译逻辑不同，scoped靠属性选择器，module靠哈希重命名，最终生成的CSS规则优先级和作用域不一致，容易互相干扰。 如果需要复用某套基础样式（如工具类），建议：

• 把工具类单独抽到<style></style>（无scoped/module），全局可用
• 业务组件样式统一用module，通过composes（仅CSS Modules支持）继承：.button { composes: flex-center from '@/styles/utils.css'; }
• 避免在module样式里用!important，它会破坏模块隔离性，且难以调试

动态class真正难的不是写法，是类名映射规则和构建时的哈希一致性——本地开发和CI环境输出的哈希可能不同，别硬编码userCard_abc123这类字符串。

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