scss样式失效主因是@import顺序错误、变量/mixin未前置声明、循环依赖及职责混淆；正确做法是严格按依赖顺序导入、分离base/utils职责、禁用深层嵌套、防御map-get空值、避免循环@use。
@import顺序错就静默失效，不是报错而是样式消失
SCSS编译器不做依赖分析，只按@import行顺序拼接代码。变量、mixin、函数必须先声明后使用，否则@include button-style直接报Undefined mixin，map-get($colors, "primary")返回null——但构建不中断，CSS规则被跳过，视觉上“突然没颜色了”或“响应式失效”，排查成本极高。
典型正确顺序（不可调换）：
-
@import 'vendor/normalize';必须在base/reset前，否则第三方样式污染重置 -
@import 'base/variables';必须在utils/mixins前，因@mixin respond-to要读$breakpoints -
@import 'utils/functions';必须在所有调用它的mixins或components前 -
@import 'pages/home';必须放在最后，它只做覆盖，不能被其他层依赖
components/里写死变量或@import pages/就是越界
每个_button.scss或_modal.scss只应是一个视觉上可独立存在的单元，且严格消费base/和utils/提供的能力，不定义新变量、不引入页面逻辑。
- 禁止在
components/_button.scss里写$btn-height: 40px或@import '../pages/dashboard' - 禁止深层嵌套：
.header { .nav { &__item { } } }→ 编译出.header .nav .nav__item，权重高、难覆盖 - 推荐平铺：
.nav__item { }+ BEM命名，靠引入顺序和选择器简洁性控制优先级 - 所有颜色/间距必须走
map-get(map-get($tokens, "color"), "primary")，拼错key返回null，所以加防御：@if map-has-key(...)
base/和utils/职责混淆会让项目迅速失控
base/是根级基础设施：只放_reset.scss、:root { --color-primary: #3498db; }、默认字体、全局排版；禁止出现.button或$card-shadow这类业务语义内容。
utils/（或abstracts/）是纯逻辑层：只存_variables.scss（断点map、主题色map）、_mixins.scss（@mixin respond-to($bp)）、_functions.scss（@function em($px)）——它不输出任何CSS，只提供工具。
- ❌ 错误：
utils/_mixins.scss里写@mixin card-shadow { box-shadow: ... } - ✅ 正确：
components/_card.scss里调用map-get($shadows, sm)和@include respond-to(md) - ⚠️ 性能隐患：
_functions.scss中递归函数若没加@if global-variable-exists($cache)缓存，每次编译都重复执行，构建时间明显变长
@use替代@import后，循环依赖会直接中断编译
用@use重构时，Dart-SASS对依赖链更严格：@use "sass/components/button"没问题，但若button.scss又@use "sass/pages/home"，而home.scss反过来@use "sass/components/button"，就会触发Circular dependency错误，编译直接失败。
- 入口文件只
@use所需模块，避免@use "sass/components"这种宽泛导入（可能含无关modal、dropdown） - 多个入口（如
admin.scss和landing.scss）若都@use "sass/elements/button"，构建工具默认会在每个输出CSS中重复生成button样式——需显式配置splitChunks或cssCodeSplit - Bootstrap-sass场景下，禁用某个组件不能只设
$enable-modals: false，必须跳过整行@import "bootstrap/modal"，否则mixin仍可能被间接调用
_mixins.scss放错了位置、components/偷偷定义了变量、或者@use链路里埋了循环引用——这些错误不会立刻报红，但会让样式在某次发布后“悄悄消失”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
