Less无法读取CSS变量原因解析

Less 作为预处理器，其变量仅在构建阶段被静态替换为具体值，编译后彻底消失，因此根本无法读取、响应或操作浏览器运行时的 CSS 变量（--xxx）；二者分属不同生命周期——Less 属于编译期、文件级作用域，CSS 变量则属于运行时、级联作用域，强行混用会导致逻辑错位与样式失效；真正实现主题动态切换的唯一可靠路径，是让 Less 通过 `var(--x, fallback)` 主动桥接到 CSS 变量，再由 JavaScript 直接操作 `document.documentElement.style.setProperty()`，完成单向解耦、双向协同的样式控制。

Less变量在编译期就消失了，根本碰不到CSS变量

Less不是运行时引擎，它只在构建阶段（Webpack、Vite 或命令行 lessc）把 @primary-color 这类变量替换成具体值，比如 #007bff，然后输出纯 CSS。生成的 CSS 文件里没有 @primary-color，也没有 var(--primary-color) ——除非你手动写进去。所以“Less 读取 CSS 变量”这个说法本身是错的：它不读，也不能读。

为什么 @{theme} 插值不能用于属性名或 var() 参数

Less 的变量插值 @{variable} 只能在选择器、url()、字符串值中生效，不能拼出 margin-@{side} 这种属性名，更不能动态生成 var(--@{name})。浏览器解析 CSS 时，var(--@{name}) 会被当成无效语法直接丢弃——因为 @{name} 在编译后还是字面量字符串，不是真实变量名。

• @name: primary-color; → color: var(--@{name}); 编译结果是 color: var(--primary-color);（看起来对，但只是字符串拼接）
• 但如果 @name 是计算出来的（比如通过函数返回），Less 4.0+ 也不支持运行时求值，插值失败或报错
• 真正安全的写法是显式写死： color: var(--primary-color, #007bff);

想让 JS 控制 Less 颜色？别绕弯，用 CSS 变量桥接

Less 变量和 JS 之间没有双向通道。硬要同步，唯一可靠路径是：Less 里用 var(--xxx) 回退，JS 用 document.documentElement.style.setProperty('--xxx', 'red') 修改。中间不经过 Less 编译器，也不依赖任何插件。

• 错误做法：@primary-color: ~`process.env.PRIMARY_COLOR`（需开启 javascriptEnabled，有安全风险且 Webpack 5+ 已限制）
• 正确做法：在 :root 定义 --primary-color: #007bff，Less 中写 @primary-color: var(--primary-color, #007bff)
• 注意 fallback 必须显式写全，否则未定义时可能变成 transparent 或继承值，导致文字消失

构建期导出 Less 变量给 JS 用，但别指望它能反向驱动样式

你可以用 less-plugin-js-vars 把 @primary-color 导出为 src/styles/less-variables.js，JS 里 import { primaryColor } from './styles/less-variables.js' 拿到值 —— 但这只是单向快照，JS 改了 primaryColor，不会影响已生成的 CSS。

• 导出文件必须被 JS 显式 import，不能靠 Tree-shaking 自动保留（加 /*#__PURE__*/ 不保险）
• 导出的是编译时刻的值，不是响应式引用；JS 切换主题必须配合 CSS 变量，不能只改 JS 变量
• 如果项目没用构建工具（比如纯 HTML + less.js），这种导出根本不可行 —— 浏览器里没有 Less 编译器来执行插件

最易被忽略的一点：CSS 变量的作用域是级联的，var(--x) 查找从当前元素向上直到 :root；而 Less 变量的作用域是文件级的，连 @import 都要按顺序处理。混用时，你以为在覆盖，其实只是两个世界各自运行。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Less无法读取CSS变量原因解析》文章吧，也可关注golang学习网公众号了解相关技术文章。