TypeScript报TS2307错误本质是缺乏对.module.less文件的模块声明，需在globals.d.ts中精准声明declare module '*.module.less' { const classes: Record<string, string>; export default classes; }，并确保该声明被tsconfig.json的include覆盖，同时Webpack配置须正确启用CSS Modules处理。

TypeScript 报 ts(2307) 错误，本质是它根本没把 .module.less 当作可导入模块——既没类型定义，也没声明规则，连“这个文件能 import”这件事都不被认可。

为什么 import styles from './X.module.less' 会报找不到模块？

TypeScript 默认只认 .ts/.tsx 和已声明的类型（比如 @types/react），对 .less 文件完全无感。它不会自动推断“哦这是个 CSS 模块，应该导出一个对象”。你看到的红色波浪线，不是 Webpack 构建失败，而是 TS 编译器在类型检查阶段直接拒绝解析该路径。

• 没写 declare module '*.module.less' → TS 不知道这文件存在
• 写了 declare module '*.less' 但没限定 .module.less → TS 会把它当普通字符串导出，和实际运行时返回的对象结构不匹配
• 声明文件没被 tsconfig.json 的 "include" 覆盖到 → 声明写了也白写

react-app-env.d.ts 或 globals.d.ts 里怎么写才有效？

必须精准匹配构建产物的运行时行为：Vite 或 CRA 编译后，.module.less 实际导出的是一个 Record<string, string> 对象，比如 { button: 'Button_button__abc123' }。声明必须反映这个形状。

react-best-practices

重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...

下载

• ✅ 正确写法（推荐放在 src/globals.d.ts）：

  declare module '*.module.less' {
    const classes: Record<string, string>;
    export default classes;
  }

• ❌ 错误写法：declare module '*.less' —— 它会让所有 .less 都走这个声明，但普通 index.less 是无默认导出的，会导致类型冲突
• ⚠️ 注意路径：声明文件必须在 tsconfig.json 的 "include" 列表里，例如："include": ["src/**/*", "src/globals.d.ts"]

Webpack 规则顺序和 less-loader 版本为什么影响类型声明？

类型声明只解决 TS 编译问题，但若 Webpack 根本没把 .module.less 当作 CSS Module 处理，运行时 styles 就是空对象——这时即使类型声明完美，逻辑也会崩。

立即学习“前端免费学习笔记（深入）”；

• lessModuleRegex 必须在 oneOf 规则中排在普通 lessRegex 前面，否则文件被普通 less 规则吃掉，跳过 css-loader?modules
• less-loader@10+ 在 Webpack 4（CRA v4/v5）下会报 this.getOptions is not a function，因为 API 已改；必须锁定 less-loader@7.3.0 或用 customize-cra + addWebpackModuleRule 手动控制 loader 链
• getStyleLoaders 调用里漏传 modules: true 或 getLocalIdent → 即使文件匹配了，也不会启用局部作用域，styles 仍是空

真正卡住人的地方不在“怎么声明”，而在“声明之后运行时还是 undefined”——那说明 Webpack 那一环没打通，得回头查正则顺序、loader 版本、modules 开关三者是否严丝合缝。少一个，TS 过了，代码就挂了。