@import在Vue组件中不生效，是因为其作用域仅限当前样式块且无法跨组件共享变量；真正全局可用需通过style-resources-loader等构建工具在编译时注入。
直接定义 @primary-color 这类变量就能用，但「能用」不等于「全局可用」——关键在引入方式和构建配置是否匹配项目环境。
为什么 @import 在组件里写不生效
很多人在单个 .vue 文件的 <style lang="less"></style> 里写 @import 'variables.less';，结果变量报错未定义。这不是语法问题，而是作用域隔离：scoped style 下每个组件样式是独立编译的，@import 只在当前 Less 文件内有效，不会透出到其他组件。
- 组件内
@import仅影响该<style></style>块，无法跨组件共享 - 如果多个组件都手动
@import同一个文件，冗余且易漏 - Vue CLI 或 Vite 默认不自动注入全局 Less 变量，必须显式配置 loader
style-resources-loader 配置要点
真正实现「一次定义、处处可用」，得靠构建时自动注入。主流方案是 style-resources-loader（Vue CLI）或 vite-plugin-style-import（Vite），这里以 Vue CLI 为例：
-
vue.config.js中pluginOptions['style-resources-loader']的patterns必须用path.resolve()绝对路径，不能写@/assets/less/variables.less这类别名 - 只支持
preProcessor: 'less'，若混用 Sass，需另配sass-resources-loader - 变量文件里避免写 CSS 规则（如
.btn { ... }），否则会被重复注入到每个组件样式中，造成体积膨胀和样式污染 - 重启 dev server 才会生效，热更新不触发 loader 重载
@primary-color 能否动态换肤
纯 Less 变量是编译时静态替换的，@primary-color: #42b883 最终生成的 CSS 里全是硬编码值，无法运行时切换。真要动态主题，得结合 CSS 自定义属性：
立即学习“前端免费学习笔记（深入）”；
- 在
:root中定义--primary-color: #42b883 - Less 文件中用
@primary-color: var(--primary-color)，再配合rgba(@primary-color, 1)等函数调用 - JS 运行时改
document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - 注意：Less 的
lighten()、darken()等函数不接受var()，只能对编译时确定的色值运算
最常被忽略的是变量命名冲突和 loader 加载顺序——比如 Element Plus 的样式也用了 @primary-color，如果你的全局变量文件在它之后注入，就会覆盖其默认值导致 UI 异常。务必检查构建产物中的 CSS 源码顺序。
