7-1架构核心是明确修改边界而非目录数量；main.scss的@import顺序不能乱，因SCSS按行拼接代码，变量、mixin、函数须先声明后使用，vendor/须在base/reset前，base/variables须在base/mixins前，utils/functions须在依赖它的文件前，pages/必须置最后。
7-1 架构不是 Vue 项目的“标配”，强行套用反而会让 main.scss 变成编译炸弹——它只在 SCSS 模块间存在强依赖、且团队超过 5 人协同维护样式时才真正起效。
为什么 main.scss 的 @import 顺序不能乱
SCSS 编译器按行拼接代码，不解析作用域。变量、mixin、函数必须先声明后使用，否则直接报错：Undefined variable "$breakpoints" 或 Undefined mixin "respond-to"。
-
vendor/（如normalize.css）必须放在base/reset.scss之前，否则第三方样式可能覆盖重置规则 -
base/variables.scss必须在base/mixins.scss之前，因为 mixin 常依赖全局变量 -
utils/functions.scss必须在所有调用它的mixins或components之前 -
pages/必须放在最后——它只做页面级覆盖，不提供基础能力
utils/ 和 base/ 的职责边界在哪
base/ 是根级基础设施：只放 :root CSS 变量、全局重置、默认字体、排版基准。这里不能出现任何组件语义类名（比如 .card、.header-nav）。
utils/（也叫 abstracts/）是纯逻辑层：只存 _variables.scss（断点 map、主题色）、_mixins.scss（@mixin respond-to($bp)）、_functions.scss（@function em($px)）。它不写样式，只提供可复用的“工具”。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
utils/_mixins.scss里写@mixin card-shadow—— 这属于components/_card.scss的职责 - ✅ 正确：
components/_button.scss中用@include respond-to(md)+map-get($shadows, sm) - ⚠️ 性能注意：
_functions.scss中递归函数（如颜色明度计算）若没加@if global-variable-exists()缓存，每次调用都会重新编译，拖慢构建
Vue 单文件组件中怎么接入 7-1 的 SCSS
不要在每个 <style scoped lang="scss"> 里重复 @import 全局文件——这会导致重复编译、变量污染、热更新失效。
- 统一入口：在
src/styles/main.scss中完成全部@import链路，然后在main.js或main.ts中导入：import "@/styles/main.scss" - 组件内只写局部逻辑：
<style scoped lang="scss">中禁止@import，只用已注入的变量/mixin（如$color-primary、@include flex-center） - 需要覆盖全局样式的场景（如某页禁用过渡）：用
pages/_home.scss写覆盖规则，并确保它在main.scss中位于最后 - 避免
@use和@import混用：Dart Sass 中二者链路不互通，@use的模块无法被@import文件访问
Vue 项目里真正影响 CSS 性能的不是目录结构，而是这三件事
7-1 解决的是协作和维护问题，不是浏览器渲染或打包体积问题。最终 CSS 是否高效，取决于：
- 嵌套深度：超过 3 层（如
.page .section .block__item）会显著拉长浏览器选择器匹配路径，Lighthouse “Recalculate Style” 时间飙升 -
@extend使用：多文件中复用%flex-center会生成冗余组合选择器（.header %flex-center, .modal %flex-center），比单独写.flex-center更大 - 构建分包：多个入口（
admin.scss、landing.scss）都@use "components/button"，Webpack/Vite 默认会在每个输出 CSS 中重复生成 button 样式，除非显式配置css.codeSplit或splitChunks
最常被忽略的一点：Vue 的 scoped 样式机制本身会给所有选择器追加 [data-v-xxxx]，如果组件内部又用了深度选择器（::v-deep）或全局 class，就等于主动放弃作用域隔离优势，让维护成本翻倍。
