能，但需加 (reference) 参数；默认作用域隔离导致变量和混入不可用，加 (reference) 可只声明不输出CSS，配合 (multiple) 避免重复定义报错，且须注意路径、扩展名及编译链追踪。
Less 中 @import 能否直接复用变量和混入？
能，但默认不生效——@import 在 Less 里默认是「作用域隔离」的，导入的文件里定义的 @variable 或 .mixin() 不会自动冒泡到当前文件。
常见错误现象：ReferenceError: variable @primary-color is undefined 或 Unknown mixin .flex-center()，尤其在拆分 variables.less 和 mixins.less 后高频出现。
- 必须显式加
(reference)参数才能只加载、不编译（即只提供定义，不输出 CSS） - 或用
(multiple)允许多次导入同一文件（避免重复定义报错） - 推荐组合写法：
@import (reference) "variables"; @import (reference) "mixins";
为什么 @import (reference) 比 @import 更适合公共模块？
因为 (reference) 让导入的文件仅作为「声明源」存在：变量和混入可被调用，但其中的顶层 CSS 规则（比如 body { margin: 0; }）完全不会输出，避免样式污染和意外交互。
使用场景：构建设计系统时，把颜色、间距、字体等抽成 theme.less，所有组件都引用它，但绝不希望 theme.less 自己生成任何样式。
立即学习“前端免费学习笔记（深入）”；
- 没加
(reference)：导入后变量不可用，且可能意外注入一堆基础重置样式 - 加了但没加
(multiple)：多个文件都@import (reference) "mixins"会报「Duplicate mixin definition」 - 正确姿势：
@import (reference, multiple) "mixins";
路径写错或扩展名省略导致 @import 静默失败
Less 的 @import 对路径和扩展名敏感，静默失败（不报错但不生效）比报错更难排查。
常见错误现象：变量明明写了，却提示未定义；混入调用时语法高亮正常，编译后报错；开发环境 ok，构建后失效。
- 必须写扩展名：
@import "variables.less";—— 写成@import "variables";在某些构建工具（如 less-loader@7+）中会 fallback 到 JS 模块解析，失败也不提示 - 相对路径以当前文件为基准，不是入口文件；建议统一用
~别名（如@import "~styles/mixins.less";），前提是构建工具配置了别名映射 - Windows 下路径分隔符用
/，别用\，否则部分版本 Less 会解析失败
嵌套 @import 引发变量覆盖与作用域混乱
当 A.less 导入 B.less，而 B.less 又导入 C.less，变量和混入的查找链就变长了，容易出现「定义被覆盖」或「就近原则误判」。
典型问题：主文件设了 @primary-color: #007bff;，但某个组件里 @import "button.less";，而 button.less 里又 @import (reference) "theme.less";，结果按钮用了 theme 里的旧值，而不是主文件新赋的值。
- Less 变量是「静态解析 + 词法作用域」，赋值点决定最终值，不是运行时查找
- 避免在组件级文件里重复
@import (reference)公共模块，统一由入口index.less导入并透出 - 混入若含参数且依赖外部变量，务必显式传参，不要指望闭包捕获：写成
.btn(@bg: @primary-color) { background: @bg; }，而非.btn() { background: @primary-color; }
最易被忽略的一点：Less 没有「模块热更新」概念，修改 variables.less 后，必须确保所有引用它的文件都被重新编译——很多前端工具链（如 webpack + less-loader）默认只监听直接改动的文件，不会追踪 @import 链。
