Next.js 13+ 默认不支持 Less，须用 next-with-less；.module.less 必须与组件同名同级；全局 Less 仅限 app/layout.tsx 顶部导入；动态拼接 class 破坏模块作用域，应优先用 composes 或 clsx。
Next.js 13+ 默认不支持 Less，必须用 next-with-less
Next.js 13（App Router）默认只识别 .css 和 .module.css，.less、.module.less 全部被忽略——不报错、不警告、直接白屏或样式丢失。这不是配置遗漏，是官方关闭了该能力。必须引入社区方案：next-with-less。它不是插件式配置，而是重写 Webpack 规则的“增强包”，会自动复制 Sass 的模块化逻辑并替换为 Less。
安装命令：npm install next-with-less -D。注意不要装 @zeit/next-less（已废弃多年，与 Webpack 5+ 不兼容）或手动配 less-loader（Next.js 内部规则已被封装，外部配置会被覆盖）。
.module.less 命名和路径必须严格匹配
Next.js 的 CSS Modules 绑定靠静态文件名识别，不依赖 import 路径或目录结构。以下任一条件不满足，import styles from './X.module.less' 就会返回空对象：
-
X.module.less必须和组件文件（如X.tsx）同名、同级目录 - 文件名大小写敏感：
button.module.less≠Button.module.less（后者才生效） - 不能把
.module.less放进styles/目录再用相对路径 import——Next.js 不会递归解析模块规则，只认“同名同目录”这一种绑定方式
错误示例：import styles from '@/styles/Button.module.less' → 找不到模块；正确写法：import styles from './Button.module.less'（组件与样式在同一个 components/Button/ 下）。
全局 Less 样式只能在 app/layout.tsx 顶层 import
想加 variables.less 或 reset.less？不能在任意组件里 import，也不能塞进 _app.tsx（App Router 已弃用该文件）。唯一合法位置是 app/layout.tsx 的最顶部：
composes
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
