less变量无法运行时动态修改，必须通过css自定义属性（如--primary-color）桥接：在variables.less中定义@primary-color: var(--primary-color, #1890ff)，再用js调用document.documentelement.style.setproperty('--primary-color', '#ff6b6b')实现主题切换。
Less 4 没有“全局变量注入”功能，所谓“自动生效”全是构建工具在背后拼接代码——你得靠 style-resources-loader 或 less-loader 的 additionalData 实现。
为什么直接写 @primary-color: #1890ff; 不生效
Less 编译器本身不维护变量池，也不扫描项目找变量文件。每个 .less 文件是独立作用域，@import 必须显式、必须在文件最顶部、必须带扩展名（@import "variables.less";），否则：
• 变量未定义报错 NameError: variable @xxx is undefined
• 写成 @import "variables"（漏后缀）→ Webpack 下 less-loader 找不到文件
• @import 放在选择器后面 → 编译失败，变量不可见
Vue CLI 项目用 style-resources-loader 注入
这是目前 Vue 生态最稳定的方式，但要注意路径和 loader 版本兼容性：
• 安装：运行 vue add style-resources-loader（别 npm install 手动装）
• 配置 vue.config.js 中的 patterns 必须用 path.resolve() 绝对路径，比如：path.resolve(__dirname, "./src/styles/variables.less")
• 路径别名（如 @/styles/variables.less）无效，style-resources-loader 不解析 alias
• 如果用了 scoped style，变量仍可用，但不能出现在 :global{} 外的选择器嵌套里（Less 语法限制）
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Vite 项目用 vite-plugin-style-import 或 less-options
Vite 原生不支持自动注入，常见方案有两个：
• vite-plugin-style-import 的 patterns 字段必须传 path.resolve() 绝对路径，相对路径或别名会静默失败
• 更轻量的做法：在 vite.config.ts 的 css.preprocessorOptions.less 里配 additionalData：additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
• 注意：Vite 的 HMR 对 additionalData 注入内容不敏感，改了变量要手动刷新
Webpack + less-loader 直接配 additionalData
绕过第三方插件，更可控：
• 在 webpack.config.js 或 vue.config.js 的 less-loader 配置中加：additionalData: `@import "@/styles/variables.less";`
• 但前提是 resolve.alias 已正确定义 @ 别名，否则报 Cannot resolve import
• 若项目启用 CSS Modules，additionalData 注入的变量依然有效，但不能写成：.module { color: @primary-color; } → 这会编译失败，因为 Less 不允许变量在模块化选择器内部动态计算
• 多个变量文件？用换行拼接：additionalData: `@import "a.less";\n@import "b.less";`
真正容易被忽略的是：所有这些“注入”，都只是在编译前把文本塞进每个 Less 文件开头——它不解决变量覆盖逻辑，也不提供运行时切换能力。想主题色点击切换？必须桥接 CSS 自定义属性，@primary-color: var(--primary-color, #1890ff); 这一行才是关键链路起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
