必须启用typescript-plugin-css-modules插件并配置namedexports: true、camelcase: true、allowunknownclassnames: false，才能让styles.btniconlarge获得类型校验，避免styles['btn__icon--large']因默认为string | undefined而无法检测拼写错误。
直接用字符串拼 className 写 "btn--primary" 或 styles['btn__icon--large']，就等于放弃 TypeScript 对 CSS 类名的校验能力——拼错、多写短横、大小写混用，编译器全放行，直到运行时样式失效才暴露问题。
为什么 styles['xxx'] 不触发类型错误？
TypeScript 默认把 import styles from './Button.module.css' 当作一个普通对象，styles['btn__icon--large'] 的类型只是 string | undefined。它不关心这个字符串是否真实存在于 CSS 文件里。
- IDE 无法补全、无法跳转到对应样式定义
- 拼成
styles['btn__icon--largs']也不会标红 - 构建产物中可能生成无效类名，但 JS 仍能跑通
必须启用 typescript-plugin-css-modules
只靠 import 不够，得让插件在语言服务层生成带字面量类型的声明文件。
-
namedExports: true：启用styles.btnIconLarge这种属性访问方式 -
camelCase: true：把btn__icon--large转为btnIconLarge，避免语法冲突 -
allowUnknownClassnames: false：严格模式，styles.nonexistent直接报错
配置生效后，styles.btnIconLarge 类型是 string，而 styles.btnIconLargs 会立刻提示 Property 'btnIconLargs' does not exist on type '...'。
BEM 多级修饰符（如 form__input-group--error--focused）怎么处理？
camelCase 后变成 formInputGroupErrorFocused，语义模糊，容易误读。
- 优先拆解：改用
form__input-group+form__input-group--error+form__input-group--focused三个独立修饰符 - 少量例外可用
as string断言：styles['form__input-group--error--focused'] as string - 构建时加正则校验，拦截含连续短横或大写字母的类名（如
btn--Primary）
真正关键的不是“能不能用 BEM”，而是所有 BEM 类名是否都经过类型系统约束——漏掉一个 as string 或一处未配插件的模块，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
