直接在入口文件写 @import "reset.less" 不行，因 Less 默认局部作用域，变量和 Mixin 不跨文件共享；须在每个需复用的文件中显式使用 @import (multiple) 导入 reset.less 才能既输出样式又支持跨文件调用。
直接在入口文件写 @import "reset.less" 不行——变量和 Mixin 用不了，纯 CSS 规则倒能生效，但复用能力归零。
为什么 reset.less 里的 .clearfix() 和 @color-primary 在其他文件里报错？
Less 的 @import 默认是局部作用域：被导入文件中的变量、Mixin 只在当前文件内可见，不会自动“冒泡”到全局。哪怕 reset.less 是你项目第一个导入的文件，它定义的 .clearfix() 也不会被后续的 button.less 或 form.less 自动识别。
-
@import "reset.less"→ 输出 CSS + 仅限本文件可用的变量/Mixin -
@import (reference) "reset.less"→ 不输出 CSS（重置样式丢失），变量/Mixin 仍不跨文件共享 - 真正让所有模块都能调用
.clearfix()和读取@reset-font-size，必须靠@import (multiple)
怎样让 reset.less 同时输出样式 + 支持跨文件复用？
关键不是“只导入一次”，而是“每个需要它的文件都显式导入”，并用 (multiple) 模式避免重复定义报错。
- 在
reset.less里只放基础规则和可复用单元：*重置、.reset-body、.clearfix()、@reset-font-size等 - 在
button.less开头写：@import (multiple) "./base/reset.less";（路径必须相对当前文件） - 在
form.less开头也写同样一行——(multiple)允许重复导入，编译器不会报variable is already defined - 别用
@import (css)导入自己的reset.less——它会跳过 Less 解析，导致变量/Mixin 完全失效
如何防止重置样式污染第三方组件（如 Ant Design）？
全局选择器（*、html、body）一旦编译进最终 CSS，就无法被 scoped 或 Shadow DOM 隔离。它们会影响所有后代元素，包括你 npm install 进来的 UI 库。
立即学习“前端免费学习笔记（深入）”；
- 不要把
reset.less放在最顶层入口（如main.less）里无条件@import——它会成为整个应用的 CSS 基底 - 改用作用域限定：把重置规则包进一个类名下，比如
.app-reset { * { box-sizing: border-box; } }，再在根容器上加class="app-reset" - 第三方组件引入前，确保其样式文件在重置之后加载（Webpack/Vite 中控制
@import顺序或 CSS<link>顺序） - 如果用了 CSS-in-JS 或 scoped style（如 Vue SFC），
reset.less就不该参与其中——它只服务于传统全局样式流
想直接引入 normalize.css 怎么办？
@import "normalize.css" 必然报错，因为 Less 会把它当 Less 代码解析。必须显式声明“这是纯 CSS，别编译”。
- 正确写法：
@import (css) "~normalize.css/normalize.css";（(css)是硬性要求） - 必须放在所有其他
@import和样式规则之前，否则 normalize 的优先级会被覆盖 - 路径前缀
~依赖 Webpack/Vite 别名配置；若构建工具不支持，改用相对路径：@import (css) "../node_modules/normalize.css/normalize.css"; - 别混用：
@import (css)只用于外部 CSS 文件；自己写的reset.less永远用@import (multiple)或普通@import
最容易被忽略的一点：重置不是“写完就扔”的一次性任务。只要项目里有多个样式文件依赖同一套 reset 规则，就必须在每个文件顶部重复写 @import (multiple)——没有捷径，也没所谓“全局注册”。路径写错、漏掉导入、或误用 (reference)，都会导致变量 undefined 或样式缺失，且错误常延迟到运行时才暴露。
