在vue3中启用css modules只需在标签添加module属性，如或，vite默认支持，无需额外配置；但不可与scoped共存，且必须通过:class="$style.xxx"使用，不能写死class="xxx"。
Vue3 里怎么启用 CSS Modules
Vue3 单文件组件中直接用 <style module></style> 就行，不需要额外配置 Vite 或 Webpack —— Vite 默认支持 .module.css、.module.scss 等后缀，但 <style module></style> 是 Vue 特有的语法糖，它会自动把内部所有类名哈希化，并导出为 $style 对象。
注意：<style scoped></style> 和 <style module></style> 不能共存，选一个。前者靠属性选择器隔离，后者靠类名重命名，原理不同。
-
<style module></style>必须配合:class="$style.xxx"使用，不能写死class="xxx" - 如果用了预处理器（如 SCSS），文件后缀仍要保持
.vue，不用改后缀；但若单独写Button.module.scss文件，则需import styles from './Button.module.scss'，和普通 JS 模块导入一致 - 不支持
@import './reset.css'这种全局引入——被 import 的非模块化 CSS 仍以原样注入，破坏局部性
为什么 $style.xxx 是 undefined
常见于三类情况：文件没被识别为模块、路径错、或写法绕过了编译流程。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 检查
<style></style>标签是否漏了module属性，写成<style scoped module></style>会报错，只留module - 路径大小写敏感：macOS/Linux 下
import './button.module.css'但文件实际叫Button.module.css→ 导入失败，$style为空对象 - 动态拼接时混入字符串：
:class="$style.btn + ' extra-class'"→extra-class是裸类，逃出模块作用域，变成全局污染源
:global() 在 Vue3 中怎么安全透出样式
:global() 是唯一能“退出”模块化的出口，但它的作用范围极窄，括号内才是全局目标，外面的仍受模块化约束。
-
:global(.hljs) { background: #2d2d2d; }→ 正确，.hljs全局生效 -
.container :global(.item)→.container被哈希，.item全局，组合无效（因为哈希后的 container 类名根本匹配不到 DOM） - 需要全局嵌套时，必须整个包住：
:global(.modal .modal-body) { padding: 1rem; }，不能拆成两个:global() - 第三方库的 reset、keyframes、字体声明等，都得显式
:global()，否则构建时直接丢弃
和第三方 UI 库（如 Element Plus）共存时的坑
CSS Modules 对 <link> 引入的第三方样式完全无感，它们照常以裸类名注入全局，比如 .el-button 始终是 .el-button，不会变。
- 你在
<style module></style>里也写.el-button？那只是另一个哈希类，和 Element Plus 的.el-button毫无关系，更不会覆盖它 - 想定制第三方组件内部样式，只能用
:deep()（不是:global()）穿透其 scoped 区域，例如：:deep(.el-input__inner) { border-color: red; } - 挂到
body下的弹窗（如<el-date-picker></el-date-picker>）不受父组件<style module></style>影响，必须在根容器加命名空间，或用:global()配合 ID/属性限定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
