7-1架构生效关键在于@import顺序、@use作用域隔离及目录修改边界，而非单纯建七个文件夹；重构失败主因是_mixin.scss位置错误或components/内擅自定义变量。
直接说结论：7-1架构不是靠建七个文件夹就自动生效的，真正起作用的是 @import 顺序、@use 作用域隔离、以及每个目录的修改边界是否被守住。重构失败的项目，90% 是因为把 _mixins.scss 放错了位置，或在 components/ 里偷偷定义了新变量。
为什么重构前必须重写 main.scss 的 @import 顺序
SCSS 编译器不做依赖分析，只按行拼接代码。顺序错，@include 就报 Undefined mixin，map-get($colors, "primary") 就返回 null，但不会中断构建——样式会静默失效。
-
@import 'vendor/normalize'必须在@import 'base/reset'之前，否则第三方样式可能污染重置规则 -
@import 'base/variables'必须在@import 'utils/mixins'之前，因为 mixin 常依赖$breakpoints或$shadows -
@import 'pages/home'必须放在最后，它只做覆盖，不提供任何基础能力；提前导入会导致组件默认行为被污染 - 所有
components/文件只能用@use "utils"，不能@import '../../utils/mixins'—— 后者绕过入口顺序，破坏依赖链
如何安全地把旧变量迁移到 tokens map 结构
离散变量（如 $primary-color、$space-md）在中大型项目里必然导致命名冲突、覆盖难查、主题切换失效。迁移不是重命名，而是语义归组 + 编译期校验。
- 用
$tokens顶层 map 统一收口："color": ( "primary": #007bff, "text": #333 )，避免$text-color和$body-text-color并存 - 所有组件内禁止直接写死颜色值，必须调用
map-get(map-get($tokens, "color"), "primary")，拼错 key（如"primar"）时返回null，CSS 规则被跳过——比崩溃更难排查，所以要加防御： @if map-has-key(map-get($tokens, "color"), "primary") { color: map-get(map-get($tokens, "color"), "primary"); }- 导出为 CSS 变量时，用两层命名空间：
--token-color-primary，而非扁平的--primary，避免和第三方库冲突
components/ 目录重构中最容易踩的三个坑
一个 _button.scss 文件看似简单，但重构时最容易越界、嵌套失控、耦合页面逻辑。
立即学习“前端免费学习笔记（深入）”；
- 禁止在
components/_button.scss里@import '../pages/dashboard'或引用.dashboard-header—— 它只应消费utils/提供的能力 - 禁止深层嵌套：
.btn { .btn__icon { &::before { } } }编译后选择器是.btn .btn__icon::before，权重高、难覆盖；应平铺为.btn__icon::before - 禁止用
!important解决覆盖问题；靠@import顺序 + 简洁选择器解决；如果pages/home.scss要改按钮圆角，就直接写.btn { border-radius: 4px; }，而不是.btn.home-variant { ... !important } - 每个组件文件只负责自己：结构（BEM）、状态（
&.is-disabled）、响应式（@include respond-to(md)），不承担布局或主题逻辑
@use 替代 @import 后必须检查的三件事
@use 强制模块化，但旧项目迁移时，常因路径、重复引入、循环依赖直接编译失败。
-
@use路径必须是相对或绝对路径，不能是模糊别名（如@use 'tokens' as t不行，得写@use '../utils/tokens' as t） - 同一文件中不能
@use同一模块两次，否则报Circular dependency；如果多个组件都要用tokens，统一由main.scss导入并@forward - 组件内调用函数必须带命名空间：
t.get("color", "primary")，不能省略t.；否则编译器找不到符号 - 旧
@import链路中隐含的“全局注入”消失了，pages/文件若还直接用$spacing-sm，会立刻报错——这是好事，说明你终于暴露了隐藏耦合
重构最难的不是改目录结构，而是让所有人停止在 components/ 里写新变量、停止在 utils/ 里写样式、停止在 pages/ 里定义组件行为。边界一旦松动，7-1 就退化成七个混乱的文件夹。
