分层结构能避免样式污染，因Less无作用域、@import仅为文本拼接；base/收口变量与基础样式，components/按需导入局部依赖，pages/仅写页面特有规则且禁止复用，index.less统一管控导入顺序与路径别名确保依赖可靠。
为什么 base/、components/、pages/ 这种分层结构能避免样式污染
因为 Less 没有作用域，@import 是文本拼接，不是模块加载。如果所有样式都平铺在 src/styles/ 下，button.less 和 header.less 都可能直接 @import "variables.less"，而一旦某人改了 variables.less 里的 @primary-color，所有组件都会静默继承——但没人知道谁依赖它、谁覆盖了它。
分层结构强制「职责收敛」：base/ 只放 variables.less、mixins.less、reset.less；components/ 下每个组件（如 button/）只 @import 自己真正需要的局部 mixin，不碰 base/ 以外的文件；pages/ 文件禁止定义任何变量或 mixin，只写页面特有规则（比如 .dashboard-header { margin-top: 8px; }）。
- 变量必须全部收口到
base/variables.less，且只被styles/index.less导入一次 -
components/button/index.less是唯一合法入口，内容只能是：@import "variables"; @import "mixins"; @import "button"; - 业务代码永远只
@import "../index";，禁止写@import "../../base/variables";这类相对路径
为什么 pages/ 目录不能复用其他 pages/ 的样式
页面级样式本质是「一次性快照」：一个 Dashboard 页面的布局逻辑，和 User Profile 页面的折叠逻辑毫无共性。强行复用会导致两个后果——要么把本该属于 layout/ 的栅格行为塞进 pages/dashboard.less，要么为了适配另一个页面而给 class 加一堆 .dashboard .user-profile .sidebar 这种超长选择器。
真实判断标准很简单：如果两个页面共用某块样式，比如都用了带阴影的卡片容器，那它就不是页面逻辑，而是 UI 原子，应该立刻提到 components/card.less；如果提上去后发现它还依赖某个页面特有的断点值，说明那个断点值本身就不该放在 variables.less 里，得拆成 @card-shadow-size 和 @page-dashboard-sidebar-width 两个语义化变量。
立即学习“前端免费学习笔记（深入）”；
-
pages/下的文件不被其他pages/或components/@import - 构建工具应配置为：只将
pages/*.less编译为独立 CSS chunk，按需加载 - CI 流程可加校验：
grep -r "@import.*pages/" src/components/，命中即失败
为什么 index.less 必须统一管理导入顺序
Less 不报错，但会静默失效。比如 components/button/button.less 里写了 .btn { color: @primary-color; }，但如果 button.less 被提前 @import，而 variables.less 在后面才导入，@primary-color 就变成未定义——编译器不会中断，只是输出 .btn { color: @primary-color; } 这段无效 CSS，浏览器渲染时 fallback 到 inherit 或 initial，颜色全乱。
所以根目录的 styles/index.less 必须严格按依赖顺序写死：
-
@import "base/index";（含 variables/mixins/reset） -
@import "layout/index";（栅格、容器、全局布局） -
@import "components/index";（每个组件只暴露自己的index.less） -
@import "pages/index";（仅页面特有规则）
这个顺序不可逆：mixins 依赖 variables，layout 依赖 mixins，components 依赖 layout，pages 依赖 components——漏掉任一环，下游就不可靠。
为什么别名路径（如 @import "~styles/mixins/grid.less";）比相对路径更安全
@import "../mixins/grid.less"; 看似简单，但只要 button.less 从 components/ 移到 shared/，所有 ../ 就全崩。而别名路径把路径解析交给 Webpack 的 resolve.alias 或 Less 插件，在编译期就 resolve 到绝对路径，和文件物理位置解耦。
实际配置只需两步：
- Webpack 中加：
resolve: { alias: { '~styles': path.resolve(__dirname, 'src/styles') } } - Less 编译时启用
paths选项指向同一目录 - 所有
@import统一用~styles/base/variables.less格式，不再出现../../../
最易被忽略的是：别名路径必须配合统一的 index.less 入口使用。否则你 alias 了 ~styles，却在 pages/home.less 里直接 @import "~styles/components/button/button.less"，等于绕过整个分层约束——路径对了，架构却垮了。
