less模块拆分后公共样式失效，核心是变量和mixin作用域未继承、@import顺序错误或构建工具未纳入依赖图；子文件末尾import变量不生效，因less按序编译且遇未定义变量静默跳过规则。
拆分 Less 模块后公共样式失效，核心原因是变量和 mixin 的作用域未被正确继承，@import 顺序或方式出错，或构建工具未将模块纳入编译依赖图——不是“拆分错了”，而是“没连上”。
为什么 @import "variables.less" 放在子文件里不生效
Less 的 @import 是顺序执行、无预加载的。如果 buttons.less 开头就写 color: @primary-color;，但它的 @import "../styles/variables.less"; 写在文件末尾，那编译器遇到未定义变量会静默跳过整条规则（甚至让后续样式全丢）。
- 入口文件（如
main.less）必须最顶部统一@import所有基础模块：@import "variables.less";→@import "mixins.less";→@import "components/buttons.less"; - 禁止子文件反向
@import父级变量——buttons.less不该自己去拉variables.less，而应依赖入口文件已注入的作用域 - Vue 单文件组件中每个
<style lang="less"></style>是隔离上下文，必须显式@import "@/styles/variables.less";，不能指望全局共享
@import (reference) 不能解决变量污染，反而容易掩盖问题
@import (reference) 只抑制 CSS 输出，但变量和 mixin 仍会注入当前作用域——它不创建作用域，也不隔离变量。你在 reference 文件里定义 @primary-color: #007bff;，所有引用它的文件都会共享这个值，冲突风险更高。
- 真正安全的复用方式是参数化 mixin：
.btn-variant(@bg, @text) { background: @bg; color: @text; }，调用时传值，不依赖全局状态 - 如果必须共用变量，全部加前缀：
@btn-primary-bg、@header-title-color，杜绝泛义名（如@primary-color） -
@import (reference)文件里只放.mixin，别放变量；变量统一收口到一个非reference的variables.less
Vite / Webpack 中路径别名（@/）在 additionalData 里完全无效
Vite 的 CSS 插件能识别 .less 文件，但 additionalData 里的 @import 是由 Less 引擎在编译时执行的，此时别名早已退出作用域。写 @import "@/styles/variables.less"; 等于没写——静默失败，不报错，也不触发 HMR。
- 必须用
path.resolve(__dirname, 'src/styles/variables.less')生成绝对路径，且确保javascriptEnabled: true已开启（Less 6+ 默认false） - Windows 下禁用字符串拼接：
__dirname + '/src/styles/'容易因反斜杠导致解析失败；坚持用path.resolve() - 运行
vite --debug css修改variables.less，看日志是否出现该文件的change事件；没出现 = 根本没进编译流水线
最容易被忽略的一点：空的 .less 文件（0 字节）会打断整个 @import 链，导致后续所有样式丢失——它不报错，只让编译器提前终止，输出空 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
