真正可维护的团队级less公共样式库需落实变量隔离、命名空间约束、单向依赖和构建路径管控四点：变量须带!important且仅在入口覆盖；mixin须加前缀、不直接输出css；文件结构强制单向依赖并配置paths；主题覆盖必须置于导入链末尾、禁用!important。
直接用 @import 拼凑一堆 mixin 文件不是“公共库”，而是“样式债发生器”。真正可维护的团队级 Less 公共样式库，必须靠变量隔离、命名空间约束、单向依赖和构建路径管控四点落地。
变量必须带 !default 且只在项目入口覆盖
所有基础变量（如 @primary-color、@spacing-md）必须在公共库的 variables.less 中声明并加 !default：
.ui-variables.less<br>@primary-color: #007bff !default;<br>@spacing-md: 16px !default;
各项目自己的入口 index.less 中，**必须且只能在此处覆盖**：
-
@primary-color: #2563eb;—— 不加!default，否则覆盖失效 - 禁止在组件文件（如
button.less）里重新声明同名变量 - Webpack/Vite 构建时，确保
@import "ui-variables"在项目覆盖语句之前执行
所有 Mixin 必须加前缀，禁用裸名与直接输出
一个没加前缀的 .clearfix() 被两个项目同时引入，其中一个升级后改了实现，另一个就静默崩坏。安全做法是：
- 统一使用命名空间前缀，如
.mylib-clearfix()、.mylib-flex() - Mixin 内部只封装声明，不直接输出 CSS 规则块（即不能写
.mylib-reset { margin: 0; }） - 参数必须覆盖全部可变维度，且默认值来自语义变量：
.mylib-button-size(@height: @spacing-lg)，而非写死32px
文件结构强制单向依赖 + paths 配置路径别名
Less 没有模块解析能力，@import 是文本拼接。一旦出现循环引用或相对路径错位，构建直接报 Recursive import 或 Cannot find module。
- 所有公共代码收口到
src/styles/core/，由core/index.less统一导出 - 组件样式（如
button.less）只允许@import "core/index"，禁止跨层导入mixins/border-radius - Webpack 的
less-loader必须配置lessOptions.paths：paths: [path.resolve(__dirname, 'src/styles')] - Vite 用户注意：
lessOptions.paths是数组，多个路径要全列，不能漏掉公共包路径
主题与覆盖层必须放在导入链末尾，禁用 !important
主题色、暗色模式、断点重定义等“覆盖逻辑”，必须通过导入顺序控制，而不是靠权重硬怼。
- 导入顺序严格为：
variables→mixins→base→components→themes/dark -
themes/dark.less里只做变量重赋值（@primary-color: #1e293b;）或嵌套特异性提升（.theme-dark .btn） - 禁止在任何地方使用
!important——它会让后续主题切换完全失效，且破坏浏览器层叠计算 - 高频覆盖项优先抽成变量，而非靠选择器层级堆砌
最常被忽略的是变量作用域和导入顺序的耦合关系：少写一个 !default，或错放一行 @import，整个公共库就从“统一规范”退化成“隐式污染源”。它不报错，但会让三个月后的调试变成考古现场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
