为什么React的CSS中Less模块类型声明报错-css教程-PHP中文网

typescript报ts2307错误本质是缺乏对.module.less文件的模块声明，需在globals.d.ts中精准声明declare module '*.module.less' { const classes: record; export default classes; }，并确保该声明被tsconfig.json的include覆盖，同时webpack配置须正确启用css modules处理。

为什么react的css中less模块类型声明报错

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></string> 对象，比如 { button: 'Button_button__abc123' }。声明必须反映这个形状。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

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

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

❌ 错误写法：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 仍是空