Less全局变量需通过@import顺序或less-loader的additionalData注入实现，不能自动生效；必须在入口文件顶部导入variables.less或配置additionalData前置插入，避免重复引入和循环导入。
Less变量如何在不重复引入的情况下全局生效
Less本身没有“自动注入”机制，所谓全局变量生效，本质是靠编译时的@import顺序和作用域规则控制。你写的@primary-color: #007bff;不会自己飞进所有文件——它只在被@import进来的上下文中可见。
- 必须把变量定义放在所有用到它的文件之前，常见做法是建一个
variables.less，并在入口index.less最顶部@import "variables.less"; - 不能依赖“路径自动解析”：比如
@import "variables";不加扩展名，在某些构建工具（如webpack + less-loader）里会失败，务必写全@import "variables.less"; - 避免循环
@import：A.less导入B.less，B.less又反向导入A.less，Less编译器直接报错Recursive import detected
Webpack中less-loader怎么配才能让变量对所有.less文件都可用
less-loader本身不提供“全局注入”，但可以通过additionalData选项，在每个less文件内容前自动拼接一段代码——这才是真正接近“自动注入”的做法。
- Webpack配置中，
less-loader的additionalData字段接受字符串或函数，返回要前置插入的内容，例如：additionalData: `@import "@/styles/variables.less";`
- 注意路径别写死：用
@/styles/variables.less这类别名时，确保resolve.alias已正确定义，否则编译报Cannot resolve import - 如果项目用CSS Modules，
additionalData插入的变量仍有效，但要注意：变量不能出现在:global{}之外的选择器内部（Less语法限制）
为什么在Vue单文件组件里
因为Vue CLI默认对每个单独调用less-loader编译，彼此隔离。没做额外配置的话，每个组件都是一个独立Less作用域。
- 解决方法不是改组件，而是统一配
less-loader的additionalData（同上一条），这样每个组件的style块都会被自动前置注入 - 别试图在组件内用
@import引用变量文件：虽然能跑通，但会导致每个组件都重复解析一遍variables.less，增加编译开销，且热更新时可能失效 - 若用了
vue-style-loader+css-hot-loader，additionalData注入的内容在HMR中不会触发重编译——变量改了要手动刷新，这是目前无法绕过的限制
PostCSS插件能否替代Less变量做全局配置
不能。PostCSS是CSS后处理器，运行在Less编译之后；它处理的是已生成的CSS字符串，没法影响Less变量的定义、计算或作用域。
- 比如你用
postcss-pxtorem把16px转成1rem，它完全看不到@font-size-base: 16px;这个Less变量，更没法替换成@font-size-base * 1rem / 16px - 想实现类似效果，得换思路：用CSS自定义属性（
--primary-color）+ JS动态注入，或用postcss-simple-vars这类插件处理纯CSS中的变量，但它不支持Less语法里的嵌套、运算、mixin等特性 - 混用Less变量和CSS变量容易混乱：Less变量编译期求值，CSS变量运行时生效，两者生命周期不同，强行桥接只会让维护成本陡增
Less的“全局变量”从来不是魔法，它依赖明确的导入链或构建时注入点。最容易被忽略的是：变量生效与否，不取决于你把它写在哪，而取决于它被@import或additionalData加载进哪个编译上下文——漏掉一次，就少一个文件能用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
