~process.env.color 失效是因为 less 3.0+ 默认关闭 javascriptenabled，且构建工具普遍禁用该选项以规避安全与兼容风险；浏览器环境无 js 运行时，node.js 环境中 process.env 仅限编译时上下文。
javascriptEnabled 默认关闭，所有 ~`...` 和 @{variable} 在函数值中失效是预期行为，不是 bug。
为什么 ~`process.env.COLOR` 突然不工作了
Less 3.0+ 移除了默认启用 JS 求值的机制，~`...` 不再自动执行 JavaScript 表达式。它现在只在显式开启 javascriptEnabled: true 且编译器支持（如 Node.js 版 less）时才尝试解析，但多数构建工具（Webpack/Vite 的 less-loader）已禁用该选项——因为存在注入风险和跨平台兼容问题。
- 浏览器环境根本无法执行
~`...`：没有 JS 运行时，less.js会直接跳过或报错 - Node.js 环境即使开了
javascriptEnabled，process.env也仅限于编译时上下文，无法读取运行时环境变量 -
@{variable}插值仍可用，但仅限字符串拼接；不能用于属性名、var(--@{name})或函数参数动态生成
filter: ~"gradient(@{a}, @{b})" 类写法为何失效
这类写法依赖字符串插值后由浏览器解析 CSS 函数，但现代浏览器对 filter 值的语法校验更严格，gradient(...) 已非标准函数（应为 linear-gradient() 等），导致整个声明被丢弃。
- 错误根源不是 Less，而是你拼出的值本身不符合 CSS 规范
-
~"..."只做原始字符串输出，不校验内容合法性；浏览器收到filter: gradient(red, blue)会静默忽略 - 正确做法是用合法 CSS 函数：
filter: ~"blur(@{px}px)"，且确保@px是数字单位变量 - 避免把多个参数打包进
@{arguments}再拼接：类型不可控，易触发Operation on an invalid type
替代方案：用 CSS 变量桥接 + 构建期注入
想让 JS 控制样式值，唯一可靠路径是绕过 Less 的 JS 求值，改用标准 CSS 自定义属性。
- Less 中写：
@primary-color: var(--primary-color, #007bff);—— 这是静态别名，不是 JS 调用 - 构建时用 Webpack DefinePlugin 或 Vite define 注入：
process.env.PRIMARY_COLOR→ 替换为字符串"#ff6b35"，再通过:root { --primary-color: #ff6b35; }生效 - JS 运行时修改：
document.documentElement.style.setProperty('--primary-color', 'red') - 导出 Less 变量给 JS 用？可用
less-plugin-js-vars，但它只生成快照文件，不参与运行时逻辑
插件里调用 JS 也要谨慎
Less 插件中的 ~`...` 同样受 javascriptEnabled 控制，且 Visitor 模式下无法直接访问 process.env 或模块作用域。
- 插件内想读取外部配置？必须提前传入参数，例如：
new MyPlugin({ theme: '#007bff' }) - 不要在
install()里写require('fs').readFileSync：Node.js 插件运行在 AST 处理阶段，路径和权限可能受限 - 浏览器插件完全不能用
~`...`：less.js 不提供eval或Function执行能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
