less中@import引入变量文件必须用.less后缀：编译器仅将带.less后缀的文件视为less源码解析，variables.css或无后缀会导致变量未定义、报错或静默失效；变量文件应纯声明、不混css规则，且须由入口文件统一首行导入。
Less中@import引入变量文件必须用.less后缀
Less编译器默认只把 @import 后缀为 .less 的文件当作 Less 源码处理，如果变量文件写成 variables.css 或没写后缀，变量不会被解析，@color-primary 这类声明直接报错或静默失效。
常见错误现象：变量文件内容正常，但编译后 CSS 里仍出现未定义变量的原始语法（如 color: @color-primary;），说明文件根本没被当作 Less 加载。
- 变量文件必须命名为
variables.less、_mixins.less等，推荐加下划线前缀（_）避免被单独编译 - 引入时显式写后缀：
@import "variables.less";，不要依赖自动补全或省略 - 路径需相对于当前文件，不是相对于入口或项目根目录；使用相对路径更可控，比如
@import "../styles/variables.less";
变量文件不能包含CSS规则，只放变量和Mixin
Less 的 @import 在变量作用域层面是“内联展开”的，不是链接式引用。如果 variables.less 里混写了 .btn { color: @red; } 这类样式规则，它会在每个 @import 处重复输出，造成 CSS 重复、权重异常甚至样式覆盖混乱。
正确做法是严格分离关注点：
- 变量文件只保留
@color-primary: #007bff;、@font-size-base: 14px;等声明 - Mixin 单独抽到
_mixins.less，用.flex-center() { display: flex; justify-content: center; }格式 - 样式规则全部放在业务组件或页面级 .less 文件中，通过
@import引入变量/Mixin 后再使用
@import顺序决定变量覆盖优先级
Less 中变量是“最后定义生效”，但前提是它们在同一个作用域层级被导入。如果 A.less 先 @import "variables.less"，B.less 后 @import "variables.less" 再 @import "A.less"，B 中的变量不会覆盖 A 中已计算的值——因为 A 编译时变量已固定。
所以全局变量应统一由入口文件（如 index.less）最先导入：
- 入口文件第一行写：
@import "variables.less";，第二行再@import "mixins.less"; - 所有子文件不再重复
@import变量，直接使用即可 - 若需局部覆盖（如主题切换），用带参数的 Mixin 封装，而不是重定义变量
Webpack或Vite中启用lessOptions可能绕过问题但掩盖本质
有人在 vue.config.js 或 vite.config.ts 里配 lessOptions: { javascriptEnabled: true }，以为能解决变量引入失败——其实这只是让 Less 允许执行 JS 表达式，跟路径、后缀、作用域完全无关。开了这个反而容易引发安全或维护问题。
真正要检查的是构建工具是否把 .less 文件识别为样式资源，以及 loader 是否启用了 paths 别名（比如 @import "@/styles/variables.less" 需配置 lessOptions.paths）。
最稳妥的做法永远是：用相对路径 + 显式 .less 后缀 + 入口统一导入。复杂项目里，少一层隐式约定，就少一个深夜排查的 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
