create-react-app默认不支持less，因其仅预置css和sass支持；需通过eject暴露配置并添加less-loader，或使用craco等工具无侵入式集成，且须注意less-loader版本兼容性与css modules配置。

create-react-app 默认不支持 less 文件，不是因为技术上做不到，而是官方选择不内置——它只预置了 css 和 sass 支持。所以当你直接 import './Button.module.less'，会报类似 Module parse failed: Unexpected character '@' 或 Cannot find module '*.less' 的错误。 下面几个关键点决定了你能不能顺利用上 less：

为什么 webpack.config.js 里搜不到 less 相关配置

create-react-app 的配置是封装在 react-scripts 里的，项目根目录下压根没有 webpack.config.js。你看到的配置文件只在执行 npm run eject 后才暴露出来——这个操作不可逆，且会把所有构建逻辑（包括 css、sass）一并摊开。如果你没 eject，就不可能在项目里手动改 webpack 配置。

less-loader 版本和 javascriptEnabled 必须匹配

Ant Design 等主流 UI 库的 .less 文件大量使用内联 JS（比如 .bezierEasingMixin()），而新版 less-loader@8+ 默认禁用 JS 执行，就会报错：

react design

将 Learn Social Studies 品牌系统应用于 React 界面，采用 CSS 变量、可复用组件规范，默认浅色主题并支持深色主题。

下载

Inline JavaScript is not enabled. Is it set in your options?

解决方法是在 less-loader 配置中显式开启：

• 用 less-loader@7 及以下：加 javascriptEnabled: true（已废弃但仍有效）
• 用 less-loader@8+：改用 lessOptions: { javascriptEnabled: true }
• 如果还报 ~antd/es/... 找不到，说明 resolve.alias 或 paths 没配好，less 解析器找不到 node_modules 下的路径

不 eject 怎么加 less 支持

直接改 node_modules/react-scripts/config/webpack.config.js 是临时方案，CI 或其他协作者拉代码后立刻失效。更稳妥的方式是用配置层工具：

• 推荐 @craco/craco：安装后新建 craco.config.js，在里面 patch webpackConfig.module.rules，注入 less 规则，无需 eject
• 避免用 react-app-rewired：它对 Webpack 5+ 兼容性差，容易和 react-scripts@5+ 冲突
• 注意 getStyleLoaders 工具函数的位置：新版 CRA 中该函数在 config/webpack.config.js 顶部导入，不能硬写 loader 数组，否则模块作用域（CSS Modules）会失效

真正容易被忽略的是：即使你配好了 less-loader，如果组件里写的是 import './style.less'（非 .module.less），它仍然会全局污染样式——less 本身不带作用域，必须配合 modules: { mode: 'local' } 和文件名约定才能启用 CSS Modules 行为。这点和 Vue 的 <style scoped></style> 有本质区别。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！