如何在Vue中配置CSS Modules？-css教程-PHP中文网

vue项目默认支持css modules，只需在标签加module属性即可启用；但实际失效主因是预处理器未安装（如scss缺sass/sass-loader）、混用scoped与module、或css-loader未正确配置modules规则。

如何在vue中配置css modules？

Vue 项目默认支持 CSS Modules，不需要额外安装 loader 或修改 webpack 配置——只要你在 <style></style> 标签上加 module 属性，就能用；但实际踩坑多发生在预处理器、第三方库或类名生成规则上。

为什么写了 `module` 却没生效？

最常见原因是：用了 lang="scss" 却没装 sass 和 sass-loader（Vite 要 sass，Vue CLI 要 sass + sass-loader）；或者混用了 scoped 和 module，后者会直接被忽略。

<style module></style> → 纯 CSS，零依赖，肯定能哈希化
<style lang="scss" module></style> → 必须确保 sass 包已安装，且版本兼容（如 Vue CLI 5 要 sass@^1.64.0）
<style scoped module></style> → scoped 会被丢弃，只按 CSS Modules 处理
类名没变哈希？检查浏览器里元素的 class 是否还是原始名——如果是，说明 css-loader 根本没走 Modules 模式，大概率是 loader 配置漏了或被覆盖

如何自定义哈希类名格式？

默认类名像 title__abc123，但你可能想要路径前缀、驼峰或更短哈希。改法在 vue.config.js（Vue CLI）或 vite.config.ts（Vite）里配 css.modules.localIdentName。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

Vue CLI：css: { modules: { localIdentName: '[name]__[local]___[hash:base64:5]' } }
Vite：css: { modules: { localsConvention: 'camelCase', generateScopedName: '[name]__[local]___[hash:base64:5]' } }
camelCase: true 启用后，.my-title 变成 $style.myTitle，否则只能用 $style['my-title']
别用 [path] 开头——开发时路径含 node_modules 或绝对路径，会导致哈希不稳定

怎么在 Composition API 里安全访问 $style？

$style 是响应式计算属性，仅在组件实例上下文中存在；在 setup() 里直接用 props 或 context 拿不到它，必须靠 useCSSModule() 或解构 getCurrentInstance()。

推荐写法：const $style = useCSSModule()（需从 @vue/composition-api 导入，Vue 3.3+ 已内置）
错误写法：import styles from './comp.module.css' —— 这是 CSS-in-JS 路线，和 <style module></style> 无关，且无法享受 $style 的响应式更新
onMounted 里直接操作 DOM 并赋 class？可以，但绕过了 Vue 的响应式系统，$style 的变化不会自动同步到 DOM
JSX 组件必须用 $style，因为不支持 <style scoped></style>

第三方组件（如 Element Plus）样式被破坏怎么办？

CSS Modules 默认对所有 .css 文件生效，包括 node_modules 里的样式——这会让 Element Plus 的 class 名全被哈希，DOM 找不到对应样式，界面直接崩。

解决方案：在 vue.config.js 中用 exclude 排除 node_modules：exclude: /node_modules/
更细粒度控制：只对特定文件名启用 Modules，比如 auto: /\.module\.css$/i，然后把自定义样式存为 xxx.module.css
想覆盖 Element Plus 的某条样式？不能直接写 .el-button，得用 :global(.el-button) 或单独引入非 module 的 CSS 文件
注意：一旦用了 exclude，你就得手动保证自己写的 CSS 文件不被误排除——比如路径匹配规则太宽泛，连 src/assets/common.css 也被跳过