TypeScript 中 styles 无自动补全，因 Vite 默认仅对 .module.css 做泛型类型声明（Record），未解析实际类名；需配置 vite-plugin-vue-type-imports 插件、正确设置 css.modules 规则，并在 env.d.ts 中声明模块类型，三者协同才能实现精准补全。
为什么 styles 在 TypeScript 中没有自动补全？
默认情况下，Vite 对 .module.css 文件只做简单类型声明（如 Record<string string></string>），不解析实际类名。你写 styles.container 时，TypeScript 不知道 container 是否存在，也就无法提示或报错。
启用 CSS Modules 类型推导的三步配置
核心是让 Vite 把 CSS 类名“编译进类型系统”，需同时满足：
- 在
vite.config.ts中开启css.modules.generateScopedName或保持默认命名规则（如[name]_[local]_[hash:base64:5]） - 安装并注册
vite-plugin-vue-type-imports（注意：不是旧版vite-plugin-vue-types） - 确保
tsconfig.json包含"types": ["vite/client"]，且项目根目录有env.d.ts声明模块
关键代码片段：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueTypeImports from 'vite-plugin-vue-type-imports'
export default defineConfig({
plugins: [vue(), vueTypeImports()],
css: {
modules: {
localsConvention: 'camelCaseOnly',
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
})
env.d.ts 必须声明 CSS Modules 模块类型
若缺少这一步，TS 会把所有 import styles from './xxx.module.css' 当作任意对象，补全彻底失效。在项目根目录 src/env.d.ts（或 env.d.ts）中添加：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
// src/env.d.ts
declare module '*.module.css' {
const classes: Record<string, string>
export default classes
}
⚠️ 注意：这个声明只是基础兜底；真正实现精准补全依赖 vite-plugin-vue-type-imports 在构建时生成类型文件，并注入到 TS 语言服务中。
常见失效场景与验证方式
补全没出来？先检查这几个点：
- VS Code 是否重启过——插件注册后必须重启 TS 服务（快捷键
Ctrl+Shift+P→ “TypeScript: Restart TS server”） - 文件是否以
.module.css结尾（.css或.scss不带module后缀不会触发） - 组件中是否用了
<style module></style>（单文件组件里用此语法时，$style补全依赖 Volar 插件，而非vite-plugin-vue-type-imports） - 终端运行
npx tsc --noEmit看是否报Property 'xxx' does not exist on type...—— 如果不报，说明类型根本没接入
真正起作用的不是“配置完就立刻补全”，而是 Volar + Vite 插件 + TS 类型声明三者协同。少一环，styles. 后面就是空的。
