根本原因是 TypeScript 将 .module.css 默认视为字符串索引类型 Record，而非具名类名对象；需用 typed-css-modules 自动生成 .d.ts 类型声明文件，并确保其被 tsconfig 包含、文件名正确（Button.module.css.d.ts）、关闭 css-loader 的 esModule 选项，最后重启 TS Server。
为什么 import styles from './Button.module.css' 后无法获得类名自动补全
根本原因不是 TypeScript 不认识 CSS 模块，而是它默认把 .module.css 文件当作普通字符串模块处理——styles 类型是 Record<string string></string>，没有具体类名字段。编辑器（如 VS Code）自然没法提示 styles.primary 或 styles.disabled。
解决路径只有一条：让 TypeScript 知道每个 CSS 文件里到底有哪些类名，并生成对应的具体类型。这不能靠手动写 declare module，得从文件内容出发自动生成。
用 typed-css-modules 自动生成 .d.ts 类型声明文件
这是目前最轻量、最稳定、不侵入构建流程的方案。它读取 CSS Modules 文件，解析出所有顶层类名（支持 :global 过滤），输出对应的 declare module 声明。
- 安装：
npm install --save-dev typed-css-modules - 运行命令生成声明：
npx tcm src/**/*.module.css（会为每个.module.css生成同名.module.css.d.ts） - 确保
tsconfig.json中"include"包含这些.d.ts文件（例如["src/**/*"]） - 注意：需关闭 Webpack 的
css-loader的esModule选项（设为false），否则生成的类型与运行时结构不一致；Vite 默认兼容，无需调整
遇到 Property 'xxx' does not exist on type '{ [key: string]: string; }' 怎么办
这个错误说明 TypeScript 仍没加载到你生成的类型定义。常见断点有三个：
完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。
-
.d.ts文件没被tsconfig.json包含——检查路径通配符是否覆盖到了生成位置（比如 Vite 项目常生成在src/下，但tsconfig.json的include可能只写了["src/**/*.ts"]） - 文件名不匹配：必须严格为
Button.module.css.d.ts（即.css.d.ts，不是.module.css.d.ts）；typed-css-modules默认生成正确，但若用其他工具（如自写脚本）易错 - TS Server 缓存未刷新：VS Code 中按
Ctrl+Shift+P→ 输入 “TypeScript: Restart TS server” 强制重载
进阶：支持 CSS-in-JS 库（如 clsx + tw-merge）的类型安全
当用 clsx(styles.primary, props.className) 时，TypeScript 仍可能放行非法类名。此时需要把 CSS 模块类型“注入”到 clsx 的签名中：
import { clsx, ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
// 在全局或入口 .d.ts 中扩展
declare module 'clsx' {
export function clsx(...inputs: (ClassValue | Record<string boolean> | undefined)[]): string;
}
</string>
更关键的是：确保你传给 clsx 的 styles 是带具体键名的类型（即已通过 typed-css-modules 生效），而不是宽泛的 Record。否则 twMerge 的运行时类名合并不会报错，但编译期就失去约束力。
真正容易被忽略的是：CSS 类名变更后，必须重新运行 tcm 并重启 TS Server——没人会记得这点，直到某天改了 .disabled 为 .isDisabled，却在组件里继续用旧名，还毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
