直接在入口文件@import reset.less会失效，因less默认局部作用域，reset中的变量/mixin不会自动提升全局；需用@import (multiple)显式导入并确保路径准确，否则调用时报错或样式丢失。
为什么直接在入口文件里 @import reset.less 会失效
Less 的 @import 默认是**局部作用域**的——被导入文件里的变量、Mixin、CSS 规则，不会自动提升到全局。如果你在 main.less 里写 @import "reset.less";，但 reset.less 里只写了纯 CSS 规则（比如 *, *::before, *::after { box-sizing: border-box; }），它确实会生效；但一旦你试图在后续样式中复用 reset.less 里定义的 Mixin 或变量，就会报错：variable @color-primary is undefined 或 Mixin .clearfix is not defined。
根本原因：Less 没有“全局命名空间”概念，只有“作用域链”，而 @import 不等于“注入全局”。
- 默认
@import "reset.less";→ 作用域仅限当前文件（即使它是入口） -
@import (reference) "reset.less";→ 不输出 CSS，只加载变量/Mixin，但仍不自动全局共享 - 真正让变量/Mixin「可用」，得靠
@import (multiple)或显式作用域穿透
怎样让 reset.less 里的变量和 Mixin 在所有模块中都能用
核心方案：把 reset.less 设为「基础依赖模块」，并在每个需要它的文件顶部显式导入，且用 (multiple) 模式避免重复编译冲突。
示例结构：
// reset.less
@reset-font-size: 16px;
.reset-body {
margin: 0;
font-size: @reset-font-size;
}
.clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
然后在其他模块中这样用：
// button.less
@import (multiple) "../base/reset.less"; // ← 关键：multiple 允许多次导入不报错
.btn {
.clearfix(); // ✅ 可调用
font-size: @reset-font-size; // ✅ 可访问变量
}
-
(multiple)是必须的——否则当多个模块都导入reset.less时，Less 编译器会因重复定义报错 - 不要用
(reference)单独导入——它不输出 CSS，会导致 reset 的基础样式丢失 - 路径必须准确，建议统一用相对路径（从当前文件出发），避免用
@import "reset"这类无后缀/无引号写法（Less 5+ 已不推荐）
如何避免重置样式污染第三方组件或 scoped 区域
全局重置（如 *, html, body {...}）一旦编译进最终 CSS，就无法被 CSS 作用域隔离。如果项目里混用 Web Components、Vue <style scoped></style> 或 Shadow DOM，这些规则仍会穿透生效。
安全做法是：把重置拆成两层
-
normalize-base.less：只含无选择器副作用的规则（html { line-height: 1.15; }、img { max-width: 100%; }）——可放心全局导入 -
reset-scope.less：含通配符、标签选择器的强重置（* { margin: 0; padding: 0; }）——只在主容器内作用，例如：.app { @import "../base/reset-scope.less"; }
这样既保基础一致性，又不破坏封装边界。尤其适合微前端或多团队协作项目。
Webpack + less-loader 下的常见坑
如果你用 Webpack 构建，less-loader 默认开启 javascriptEnabled: false，而有些旧版 reset 库（如 old normalize.less）用了 @plugin 或 JS 表达式，会直接编译失败。
- 错误信息典型为：
Unrecognised input. Possibly missing something或Cannot resolve module 'less' - 临时解法：在
less-loader配置中加{ javascriptEnabled: true }（仅调试用，生产慎开） - 更稳妥做法：换用纯 CSS 版本的 normalize（如
normalize.css转成normalize.less时手动删掉 JS 相关行） - 别忘了在 Webpack alias 中配好
@base: './src/styles/base'，否则@import "~@base/reset.less"会路径解析失败
模块化导入不是一劳永逸——reset 的“全局性”本质和 Less 的作用域模型存在张力，每次增删模块时，都得检查 @import (multiple) 是否漏了，或者是否误用了 (reference) 导致样式缺失。
