Next.js TSX文件中CSS模块类名智能提示配置求助

• 确保项目中存在next-env.d.ts文件（Next.js初始化TS项目时自动生成），该文件内置了CSS Modules的类型声明，若缺失可手动创建，内容为：

  /// <reference types="next" />
  

• 若仍无提示，手动添加CSS Modules类型声明文件：在项目根目录或src目录下创建styles.d.ts，内容如下：

  // 针对CSS Modules的类型声明
  declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
  }
  
  // 若使用SCSS模块，追加以下内容
  declare module '*.module.scss' {
    const classes: { [key: string]: string };
    export default classes;
  }
  

• 检查tsconfig.json的include配置，确保包含声明文件和源码文件：

  {
    "compilerOptions": {
      // 保留原有编译配置
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "styles.d.ts"],
    "exclude": ["node_modules"]
  }
  

• 重启TypeScript语言服务（VS Code中按Ctrl+Shift+P，输入TypeScript: Restart TS Server执行），确保类型配置生效。

注意：CSS文件必须以.module.css（或.module.scss）为后缀，Next.js才会将其识别为CSS Modules并生成类名对象。

内容的提问来源于stack exchange，提问作者Amari Willis