@use能真正隔离变量和mixin，因其建立命名空间引用并强制显式访问（如vars.$spacing-sm），而@import是全局文本拼接，导致变量/mixin直接注入作用域引发冲突。
SCSS 的模块化能力不是锦上添花，而是防止组件样式失控的底线——没有它，@mixin 和 %placeholder 就没法安全复用，$spacing-xs 这类变量一改就崩，_button.scss 里定义的 %button-reset 在 _dropdown.scss 中根本 @extend 不上。
为什么 @use 比 @import 能真正隔离变量和 mixin
@import 是把文件内容“复制粘贴”进当前作用域，所有变量、@mixin 全局可见；@use 则建立命名空间引用，强制你写 vars.$spacing-sm 或 mixins.button-variant()。这意味着：
- 两个组件同时用
$border-radius，但分别来自@use 'theme/light' as light和@use 'theme/dark' as dark，不会打架 - 未被调用的
@mixin或未被引用的变量，Dart Sass 会自动剔除，编译后 CSS 更小 -
@use 'components/button' as btn这一行，就明确暴露了依赖关系，删组件时一眼知道谁在用它
_button.scss 必须包含哪些内容才算模块化合格
一个 SCSS partial（以下划线开头）不是“拆文件”就完事，而是要封装完整语义单元。合格的 _button.scss 至少应含：
-
$button-padding变量声明（不能只在main.scss里定义一次然后指望全局生效） -
@mixin button-variant($size: md)，供其他组件参数化调用 -
%button-reset占位符，让_dropdown.scss能安全@extend %button-reset -
.btn规则本身，且必须放在同一文件内——否则%button-reset无法被正确解析
如果只放样式规则，不带变量和占位符，那它就只是个样式片段，不是可复用模块。
core/_index.scss 的导入顺序为什么不能错
SCSS 编译是线性执行的，变量和 @mixin 必须先声明再使用。常见错误是把 _functions.scss 放在 _button.scss 后面，结果 button-variant() 里调用的 rem-calc(12px) 报 Undefined mixin。正确顺序必须是：
- 第一梯队：
_variables.scss、_functions.scss、_mixins.scss - 第二梯队：
layout/下的_grid.scss、_container.scss（仅含布局抽象，不含视觉语义） - 第三梯队：
components/下所有文件，如_button.scss、_input.scss
一旦 layout/_header.scss 这种含视觉逻辑的文件混进 layout 目录，整个模块边界就塌了——它该属于 components/ 或 sections/。
Webpack/Vite 误编译 _button.scss 的风险怎么防
构建工具看到 .scss 文件，默认可能把它当入口单独编译成 CSS。而 _button.scss 是 partial，绝不能独立输出。防法只有两条：
- 文件名必须以下划线开头（
_button.scss），这是 Dart Sass 和主流构建工具的约定识别方式 -
main.scss中禁止直接@import 'button'，必须走统一入口：@import 'core/index'，由core/_index.scss控制加载链
漏掉任一条件，_button.scss 就可能被当成独立样式表输出，造成重复样式、变量覆盖或空文件报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
