less 4.x 中 / 不再参与数学运算，必须用 () 或 ./ 显式声明除法，否则原样输出导致 css 语法错误；@import 必须带 .less 后缀；calc() 插值需用 ~"" 转义；旧 autoprefix 插件失效，须改用 postcss-loader。
Less 4.x 中的 / 不再参与数学运算，除非显式包裹在括号内或改用 ./；这不是配置能绕开的行为，而是编译器硬编码规则——漏掉一个括号，CSS 就会输出 100px / 4 这种非法声明，浏览器静默丢弃，且构建不报错。
除法必须加括号或改用 ./，否则原样输出
Less 4.x 彻底移除了对裸 / 的解析能力。比如 width: 100px / 4; 编译后就是 width: 100px / 4;，CSS 语法错误，DevTools 里该行显示为灰色划掉。
-
(100px / 4)是推荐写法：语义清晰，单位混合安全，支持嵌套如(2rem / 2) -
100px ./ 4也合法，但./前后必须有空格；100px./4或100px ./4（空格位置错）都会报错 -
(100 / 4)px是反例：单位后置导致Operation on an invalid type -
line-height: 20px / 16px;必须改成line-height: (20px / 16px);或更稳妥的无单位值line-height: 1.25;
@import 必须带 .less 后缀，否则变量找不到
Less 4.x 默认关闭路径推测，@import "mixins" 不再尝试匹配 mixins.less，而是按字面路径查找。结果就是变量未定义、ReferenceError: variable is undefined。
- 必须显式写后缀：
@import "./variables.less";、@import "~antd/dist/antd.less"; - 用
~别名前，先确认node_modules/xxx下真实存在.less文件（例如 Ant Design v5 已移除所有.less源码） - VS Code 的 Easy Less 插件（1.7.0+）也遵循此规则，不会自动补后缀
calc() 插值必须用 ~"" 转义，否则解析冲突
Less 4.x 会把 calc(100% - @gap) 当作减法运算去解析，而 @gap 若含单位或未定义，直接报 ParseError。
- 正确写法：
width: calc(~"100% - @{gap}");，其中@{gap}插值，其余字符串原样保留 - 减号前后必须有空格：
calc(~"100% - @{gap}")✅，calc(~"100%-@{gap}")❌（浏览器静默忽略） - 别嵌套使用：
@w: calc(~"100% - @{gap}"); margin: @w + 10px;会失败，因为@w是字符串 -
@gap必须自带单位（如@gap: 20px;），不要靠拼接补单位
旧插件如 less-plugin-autoprefix 已彻底失效
这个插件最后一次发布是 2016 年，硬编码过时浏览器数据，在 Less 4.x 中根本不会运行——不是配置漏了，是它压根没机会执行。
- 必须替换为
postcss-loader+autoprefixer标准流程：Less → CSS → Autoprefixer -
postcss-loader必须紧接在less-loader之后，Webpackuse数组顺序应为['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - 删掉所有手动前缀和兼容 mixin，比如
.flex() { display: -webkit-flex; display: flex; } - 确保
.browserslistrc存在且内容合理，例如["last 2 versions", "not dead", "IE >= 11"]
真正容易被忽略的是：/ 的行为由 Less 编译器底层硬编码决定，不经过任何配置项（math、strictMath 都不影响它），也不随构建工具变化——你得逐行检查生成的 CSS，或者用脚本扫描含 / 的声明，确认是否被原样输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
