根本原因是Webpack未识别.less文件或less-loader版本错配：CRA默认仅处理.css，须修改配置添加.less规则；less-loader@8+废弃javascriptEnabled等旧选项，需降级至@7.3.0或@5.0.0并正确传入lessOptions。
React项目导入.less文件失败，根本原因不是“不支持”，而是less-loader未正确接入或版本错配——90%的报错都卡在这两步。
为什么import './index.less'直接报错Module not found或Module build failed
create-react-app（CRA）默认只注册了/\.css$/的处理规则，.less文件根本不会被识别，更谈不上编译。即使你装了less和less-loader，没改Webpack配置，它们就是摆设。
- 典型错误信息：
Module not found: You attempted to import ./index.less which falls outside of the supported scheme - 或者更隐蔽的：
Module build failed (from ./node_modules/less-loader/dist/cjs.js)—— 这说明loader已触发，但参数或版本出问题 - 如果你用
react-app-rewired+customize-cra，必须确认addLessLoader调用位置在override链里，且没有被其他插件覆盖
less-loader版本太高导致ValidationError: Invalid options object
新版less-loader@8+（尤其v11+）彻底废弃了javascriptEnabled、modifyVars等旧选项，但很多教程和customize-cra插件仍按老API传参，一运行就炸。
- 报错关键词：
options has an unknown property 'javascriptEnabled'或'data' - 最稳解法：降级到
less-loader@7.3.0（兼容javascriptEnabled: true）或@5.0.0（兼容老版customize-cra） - 执行：
npm uninstall less-loader && npm install less-loader@7.3.0，别用@latest - 顺带检查
less版本：v4.x是当前最稳妥的，less@4.2.0+less-loader@7.3.0组合实测无坑
用react-app-rewired时config-overrides.js写错的常见姿势
这个文件看似简单，但customize-cra的API在不同版本间变动频繁，错一个参数名或调用顺序就会静默失效。
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“前端免费学习笔记（深入）”；
- 不要直接写
addLessLoader({ javascriptEnabled: true })——v2.x的customize-cra需要显式传lessOptions对象 - 正确写法（适配
customize-cra@3.x+less-loader@7.3.0）：const { override, addLessLoader } = require('customize-cra'); module.exports = override( addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' }, }, }) ); - 如果用了
fixBabelImports（比如配antd），确保addLessLoader在它之后——顺序影响样式是否能被正确重写 - 改完
config-overrides.js必须重启服务：npm run start不能热更新此配置
引入antd.less或自定义:global样式不生效
Less变量生效了，但组件里写:global(.my-class) { ... }还是没效果？问题常出在CSS Module机制上。
- CRA对
.module.less自动启用CSS Modules，:global能破作用域，但必须写在顶层，不能嵌套 - 错误写法：
.container { :global(.btn) { color: red; } }→ 不生效 - 正确写法：
:global(.btn) { color: red; } .container { ... } - 若要全局引入
antd.less，确保它在src/index.js最顶部导入，且addLessLoader已启用javascriptEnabled: true（否则@import语句会报错）
真正容易被忽略的是：所有配置变更后，node_modules/.cache和react-scripts的内部缓存可能残留旧规则。遇到“明明改了却没反应”，先删node_modules/.cache/react-scripts再重启，比反复检查配置更快。
