less 4.0 彻底移除 javascriptenabled 和 js 内联表达式（如 ~...），因其删除了对 node.js eval/v8 的依赖，改用 if()、boolean()、插值 @{} 和转义 ~"" 实现静态编译期逻辑。
Less 4.0 彻底移除了 javascriptEnabled: true 支持，所有 JS 内联表达式（如 ~`"calc(100% - " + @gap + ")"`）已无法编译，必须改用原生 if()、boolean()、插值 @{} 和转义 ~"" 组合替代。
为什么 JS 内联表达式被弃用且无法降级使用
Less 4.0 删除了对 Node.js eval 和 V8 引擎的依赖，JS 表达式不再参与编译流程。任何残留的 ~`...` 语法会直接报错 Unrecognised input 或静默失效。这不是兼容性警告，而是硬性移除 —— 即使你保留 javascriptEnabled: true 配置，less-loader 也会忽略它并报错 Option 'javascriptEnabled' is deprecated and will be removed in future major versions。
-
~`@{width} + 20px`❌ 编译失败：Less 不再解析反引号内 JS -
~`Math.round(@base * 1.2)`❌ 同上，且无法 fallback 到 CSS 值 - 旧版 Webpack 配置中仍写
javascriptEnabled: true会导致 less-loader 3.x 升级后构建中断
用 if() + boolean() 替代 JS 条件逻辑
if() 是唯一合法的条件取值函数，但它不接受裸变量或运行时值，所有判断必须基于静态布尔表达式。常见迁移方式：
- 把 JS 字符串拼接逻辑转为 Less 类型检查：
if(iscolor(@c), @c, #333)替代~`@c || "#333"` - 环境分支必须显式比较：
background-color: if(@env = "prod", #1a1a1a, #f8f9fa)，不能写if(@env, ..., ...) - 避免嵌套
if()：先定义中间布尔变量，如@isDark: @theme = "dark";，再复用color: if(@isDark, white, black) -
boolean()仅用于缓存计算结果，不是类型转换器：@hasBorder: boolean(@border-width > 0); border: if(@hasBorder, 1px solid #ccc, none)
用 ~"" + @{ } 替代 JS calc 拼接和单位运算
JS 内联常被用来动态生成 calc()，现在必须靠 Less 原生插值完成。关键点是：所有参与运算的变量必须带单位，且必须用 ~"" 包裹整个字符串，用 @{} 显式插入变量值。
- 错误写法：
height: calc(100vh - @header-height);→ 输出非法 CSS - 正确写法：
height: ~"calc(100vh - @{header-height})";→ 输出height: calc(100vh - 64px); - 复杂公式务必拆解：
@safe-gap: unit(@gap, 'px'); width: ~"calc(@{container-width} - @{safe-gap} * 2)"; - 禁止在
~""外做运算：~"calc(100% - @{offset})"✅，但calc(~"100%" - @offset)❌（Less 尝试执行减法而非字符串拼接）
被误用的 @import 变量路径必须重构
旧项目中常见 @import "theme-@{env}.less"; 这类 JS 风格路径拼接，Less 4.0 完全不支持 —— @import 是纯静态解析阶段行为，变量插值在该阶段尚未展开。这类写法会直接导致 Cannot resolve 错误。
- 物理分离文件？只能靠构建工具注入：
less-loader的additionalData选项拼出@import "themes/@{env}.less";字符串再传入 - 更推荐方案：统一入口
variables.less，用modifyVars覆盖关键值，如{ '@theme': '"dark"' } - 所有环境相关样式应通过
if()控制属性值，而非试图切换文件；否则 HMR 热更新会失效
最易忽略的是：Less 4.0 的所有条件逻辑都发生在编译期，没有任何“运行时”概念。你以为的“动态”，其实是构建时一次性确定的静态分支 —— 如果你在 JS 中修改了某个变量再触发重编译，那不是 Less 在响应，而是你手动重启了构建流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
