Vite中CSS Modules需配置localsConvention为'camelCase'或'camelCaseOnly'以支持驼峰访问；前者保留短横线键名，后者仅暴露驼峰键名；文件须以.module.css等命名；还可通过generateScopedName自定义哈希类名格式。
在Vite项目中使用CSS Modules时，类名默认以短横线（kebab-case）形式导出，但React组件中引用时需用驼峰式变量名访问——直接写styles.myButton会报错，因为实际导出的是styles['my-button']，必须手动转换或让构建工具自动处理。
启用camelCase命名转换
第一步：打开vite.config.ts或vite.config.js，在css.modules配置项中添加localsConvention: 'camelCase'。
第二步：确保你的样式文件名符合CSS Modules约定——必须以.module.css、.module.scss或.module.less结尾，例如Button.module.scss。
第三步：在组件中按驼峰方式导入并使用类名：import styles from './Button.module.scss' → <div classname="{styles.myButton}"></div>。这一步生效的前提是localsConvention已启用，否则styles.myButton始终为undefined。
立即学习“前端免费学习笔记（深入）”；
camelCase与camelCaseOnly的区别
方法一：localsConvention: 'camelCase'
保留原始类名映射，同时生成驼峰式别名。比如.my-button既可通过styles['my-button']访问，也可通过styles.myButton访问。
方法二：localsConvention: 'camelCaseOnly'
【只暴露驼峰式变量名，原始短横线键名被彻底移除】。此时styles['my-button']返回undefined，必须严格使用styles.myButton。
这个区别会影响已有代码的兼容性——如果你项目里混用了styles['xxx-yyy']写法，切到camelCaseOnly后会立刻报错。
自定义哈希类名格式（可选增强）
在css.modules中加入generateScopedName配置，控制最终生成的CSS类名字符串：
generateScopedName: '[name]__[local]___[hash:base64:5]'
这会让Button.module.scss里的.my-button编译成类似Button__myButton___aBcDe的类名，既保持可读性又杜绝哈希碰撞。注意[local]部分已按localsConvention规则转为驼峰，所以无需额外处理。
