less 当前最新稳定版为 v4.2.0（2024 年发布），非重写级升级；关键变化包括：less-loader 需升至 ^11.0.0 以兼容 webpack 5，@import 必须显式带 .less 后缀，颜色/尺寸函数需显式单位，变量作用域更严格。
Less 本身没有 v3 / v4 的官方大版本划分。你看到的 “Less v4” 很可能混淆了 Bootstrap v4（用 Sass 编写） 或 Tailwind CSS v4（2026 年初刚发布） 的版本号，而 Less 当前最新稳定版仍是 v4.2.0（2024 年发布），它并非一次“重写级”升级，而是对已有能力的加固与收敛。
真正值得关注的，是 Less 在 v3.12 → v4.x 这段实际演进中，几个影响开发行为的关键变化。
less-loader 与 webpack 5 兼容性问题常导致编译失败
webpack 5 移除了 Node.js polyfill 自动注入机制，而旧版 less-loader（≤ 7.x）依赖 fs、path 等内置模块，未显式声明 resolve.fallback 就会报错：
Module not found: Error: Can't resolve 'fs' in 'node_modules/less/lib/less'
这不是 Less 语法问题，而是构建链路断裂。解决方式很明确：
- 升级
less-loader到^11.0.0（适配 webpack 5+），同时确保less本身 ≥4.1.0 - 若仍用
less-loader@8.x，需在vue.config.js或webpack.config.js中手动补全 fallback：
config.resolve.fallback = {
fs: false,
path: require.resolve('path'),
crypto: require.resolve('crypto-browserify')
}
注意：fs: false 是必须的——Less 在浏览器端不执行文件读取，服务端编译才需要，loader 已默认处理。
@import 规则的行为更严格，路径解析不再自动补后缀
v3 中 @import "variables" 可能匹配 variables.less 或 variables.css；v4 默认只按字面路径查找，不尝试补 .less，也不回退到 .css。
常见错误现象：局部变量无法被识别、ReferenceError: variable is undefined，其实只是 @import 根本没加载成功。
正确写法必须带扩展名：
@import "./mixins.less";<br>@import "./themes/default.less";
如果你依赖 ~ 别名（如 @import "~antd/lib/style/themes/default.less"），要确认该路径下真实存在 .less 文件——Ant Design v4 的源码确实提供 .less，但 v5 已移除，直接导入会失败。
函数调用语法收紧，避免隐式字符串拼接
v3 允许类似 lighten(@color, 10%) 这种写法中省略括号内的单位（10 被当作 10%），v4 要求单位显式：
- ✅ 正确：
lighten(@color, 10%)、fade(@color, 80%) - ❌ 报错：
lighten(@color, 10)、fade(@color, 80)（v4 解析为无单位数值，类型不匹配）
这个变化影响所有颜色函数（darken、saturate、spin 等）和尺寸类函数（round(2.3px) 合法，round(2.3) 不再推断为 px）。
迁移时建议全局搜索 \(\d+\) 类型参数，尤其在 mixin 调用中——很多老项目把单位写在变量值里（@spacing-sm: 4px;），反而不受影响；但硬编码数字的就得补单位。
变量作用域规则更符合直觉，但可能暴露旧代码隐患
v4 强化了块级作用域语义：嵌套规则中的变量不会自动提升到父级，@media、&:hover 内部定义的变量仅在该块生效。
这本是好事，但如果你的 v3 项目靠“意外泄露”实现某些 hack（比如在 .btn { @size: 16px; &:hover { font-size: @size; } } 中复用），v4 下 @size 在 &:hover 块内不可见，会回退到全局同名变量或报错。
安全写法始终是显式传递或提升声明位置：
.btn {<br> @size: 16px;<br> font-size: @size;<br> &:hover {<br> font-size: @size;<br> }<br>}
或者改用 mixin 封装逻辑，避免依赖作用域“漏洞”。
真正的平滑迁移难点不在语法，而在构建配置和路径管理。很多所谓“升级失败”，其实是 less-loader 版本卡在旧时代，或是误把 Bootstrap/Tailwind 的版本号套到了 Less 头上。确认你实际用的是 less@^4.2.0 和 less-loader@^11.0.0，再逐项检查 @import 路径和函数单位，基本就能越过所有坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
