less组件库需以唯一顶层类名（如.ui-kit）包裹样式、html显式挂载该类、用@import(reference)按需加载、正交拆分参数化mixin，并在less-loader中配置paths路径，缺一不可。
能，但前提是放弃“写完就用”的直觉，接受编译时约束——Less组件库不是堆文件，而是控作用域、管导入链、拆正交维度。
为什么直接写 .btn { } 就算不了组件库
因为没隔离作用域。.btn 编译后就是全局选择器，改它可能让第三方弹窗按钮也圆角变大；更糟的是，一旦多个团队成员在不同文件里定义 .btn，Less 会按导入顺序覆盖变量和 mixin，最后谁的生效全看运气。
- 所有组件样式必须包裹在唯一顶层类名下，比如
.ui-kit或.my-app，HTML 容器必须显式加这个 class - 禁止在 mixin 内写裸选择器：
button、.icon、&:hover（除非它被包裹在.ui-kit .button { ... }里） - 检查编译后 CSS：搜索
button {或.icon {，只要出现没被.ui-kit前缀收束的，就说明作用域失控
如何用 @import(reference) 真正实现按需加载
@import "button.less" 是全量内联，哪怕你只调用了 .button-base()，整个文件里所有 .button-size()、.button-theme() 的 CSS 都会打进包里。@import (reference) "button.less" 才是正确起点——它只让 mixin 和变量可用，不输出任何 CSS。
- 必须显式调用才生成样式：
.ui-kit .btn-primary { .u-btn-base(); .u-btn-size(medium); .u-btn-theme(primary); } - 命名空间前缀不能省：
.u-btn-size()而非.size()，否则input.less里的.size()会覆盖它 - 避免间接调用链：不要在
.card()里直接写.u-btn-base()，否则只要用了.card()，按钮样式就必然被打包
参数化 mixin 怎么写才不翻车
错误示范：.btn(@size, @theme) 里同时处理 padding、background、hover、disabled——这叫“耦合式参数”，每次新增一个尺寸就得复制整段逻辑。
- 尺寸、状态、主题必须正交拆分：
.u-btn-size(small)只管height/padding/font-size；.u-btn-state(disabled)只改background+pointer-events: none+cursor: not-allowed - 所有参数设默认值：
@bg: @primary-color，别留空，否则漏传直接编译失败 - 主题色必须显式传三值：
@bg、@border、@text，不能靠contrast(@bg)自动推导，幽灵按钮（@bg: transparent）会崩文字色 - 用
isnumber()或default()做兜底：@radius: default(@radius, 4px)，防传入null或字符串
less-loader 配置错一个路径，整个模块化就失效
Less 不走 Webpack 的 resolve.alias，@import "@/styles/core" 必报 File not found。变量缺失（如 Cannot resolve variable @text-color）表面是引用问题，实际是 theme-dark.less 没被 @import 进当前编译链路。
- 在
less-loader的lessOptions.paths中显式加路径：paths: [path.resolve(__dirname, "src/styles")] - 组件内统一写
@import "core/index";，而非相对路径@import "../core/index" - 主题文件必须放在所有组件之前导入：
@import "themes/dark"; @import "components/button";，否则@primary-color还是旧值 - 验证方式：在 mixin 里加
// debug: @primary-color，看编译后注释是否是你期望的值
最易被忽略的点：HTML 必须手动加 .ui-kit 类。再规范的 Less 结构，如果容器没这个 class，所有嵌套选择器都失去意义——它不是可选装饰，是作用域守门员。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
