应该放在 reset.less 里，但必须用 @import 显式引入且置于所有样式前；需限定作用域如 .app-reset 避免污染第三方组件；路径须用相对路径确保解析正确，不可依赖自动加载或 @layer。
全局重置样式该不该放在 reset.less 里？
应该，但必须用 @import 显式引入，且不能依赖“自动加载”或“入口文件隐式包含”。Less 不会自动合并或提升全局样式作用域——reset.less 里的规则只在被 @import 的作用域内生效，如果没导入，就等于不存在。
常见错误是把 reset.less 放进项目目录却从不 @import，结果浏览器里依然有默认 margin 和 padding，还以为是重置失效；其实是根本没参与编译。
-
@import必须写在使用任何自定义类之前（比如@import "reset.less";要在.btn {}定义前） - 避免用
@import (multiple)或@import (optional)加载重置文件——它们会绕过顺序控制，导致重置被覆盖 - 推荐路径写法：
@import "./base/reset.less";（相对路径更可控，不依赖 Less 配置的paths）
如何防止重置样式污染第三方组件？
直接在全局 @import 重置，会让所有后续样式都受其影响，包括你引入的 UI 库（如 Ant Design、Element Plus）的 CSS。它们内部往往已做适配，再叠加重置反而破坏布局。
正确做法是限定作用域：把重置规则包进一个顶层类名，比如 .app-reset，然后只对项目自有容器启用。
- 重置文件里不要写
*, html, body { ... }，改用：.app-reset { * { margin: 0; padding: 0; } h1, h2, h3 { font-weight: normal; } } - 在 HTML 中给根容器加上这个类：
<div class="app-reset">...</div> - 第三方组件的容器（如
<el-dialog></el-dialog>）不加.app-reset，自然隔离
@import 时路径出错的典型表现和排查方法
Less 编译报错 File not found: reset.less 或静默失败（输出 CSS 里完全没重置代码），90% 是路径问题，不是语法错误。
Less 的 @import 路径解析基于「当前文件位置」，不是入口文件或配置路径。比如 components/Button.less 里写 @import "reset.less"，就会去 components/reset.less 找，而不是项目根目录。
- 统一用相对路径，从当前文件出发算：上级用
../，同级直接写文件名 - 避免用别名路径（如
@import "~styles/reset.less"），除非构建工具（Webpack/Vite）明确配置了alias并支持 Less 解析 - 检查文件扩展名：Less 默认可省略
.less，但显式写上更稳妥，防止和同名.css文件冲突
为什么不用 CSS 的 @layer reset 替代？
因为 Less 编译阶段早于 CSS 层叠层（@layer）解析，@layer 是纯运行时机制，Less 无法用它控制导入顺序或作用域。你在 Less 里写 @layer reset { @import "reset.less"; } 是无效语法，会直接报错。
真正能起作用的只有两个层面：一是 Less 的 @import 顺序（决定 CSS 规则出现顺序），二是 CSS 选择器特异性（决定谁覆盖谁）。想让重置生效，靠的是前者——确保它出现在所有其他样式之前。
- 不要试图在
@import外套@layer，Less 不认 - 也不要用
!important强行提权——它破坏可维护性，且对继承属性（如font-family）无效 - 最稳的方式仍是：单点入口（如
index.less）中第一个@import就是重置文件
重置样式的本质不是“清空”，而是“建立一致起点”。容易被忽略的是：它和后续样式之间没有魔法隔离，全靠你手动控制 @import 时机、路径和作用域。漏掉一次导入，或导错一层路径，整个基础就松动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
