sass partial 是以 _ 开头的 .scss 文件（如 _variables.scss），不单独编译，仅通过 @use 或 @import 被引入；@import 不支持 .css 文件，且已被弃用，而 @use 要求显式路径、后缀和命名空间调用。
什么是Sass Partial，为什么不能直接用 @import 引入普通 .css 文件
Sass Partial 是以 _ 开头的 .scss 文件（比如 _variables.scss），它不会被单独编译成 CSS，只供其他 Sass 文件通过 @use 或 @import 引入。如果你写了 _reset.css，Sass 根本不认——后缀必须是 .scss 或 .sass，且命名要带下划线。
常见错误现象：@use 'reset'; 报错 “File to import not found”，其实是你写了 reset.css 而不是 _reset.scss；或者文件在子目录但没写对路径。
- Partial 文件名必须以
_开头，否则会被当作入口文件尝试编译 -
@use是现代推荐方式，它默认启用模块化作用域（变量/混合宏不会全局污染） -
@import已被弃用（Dart Sass 2.0.0+ 警告），且会把所有引入内容合并到全局，容易命名冲突 - 路径区分大小写，尤其在 Linux/macOS 下，
@use 'Components/button'找不到_Button.scss
@use 的路径怎么写才不会 404
路径是相对 @use 所在文件的位置，不是相对于项目根目录。很多人卡在这一步：以为写 @use 'src/styles/_mixins' 就行，结果报错——因为当前文件不在 src/ 下，而是在 src/pages/ 里。
- 推荐用别名路径（alias path），在构建工具中配置（如 Vite 的
resolve.alias或 Webpack 的resolve.alias），例如映射@→src/styles，然后统一写@use '@/mixins' as mixins - 避免多层相对路径如
@use '../../../mixins'，可读性差、重构易断 - 如果没配别名，就老实用相对路径：当前文件在
src/components/Button.scss，想用src/styles/_z-index.scss，就得写@use '../../styles/z-index' as z - Dart Sass 不支持 Node.js 风格的模块解析（比如自动补
.scss后缀），必须显式写出_z-index.scss或省略后缀（但前提是文件确实是.scss）
如何用 @use 正确共享变量和混合宏
用 @use 引入 Partial 后，默认不会把它的变量/混合宏注入当前作用域，必须显式通过命名空间调用，比如 color.$primary、color.text-primary()。这是防污染的设计，但新手常误以为“引入了却用不了”。
- 别名用
as *可以解除命名空间（如@use 'colors' as *），但仅限可信的、无冲突风险的局部使用 - 混合宏（
@mixin）必须用@include调用，不能像函数那样直接写color.text-primary - 如果多个 Partial 都定义了同名变量（如都导出
$spacing），@use会强制要求你用不同别名，避免静默覆盖 - 想跨模块复用一个混合宏，别把它塞进
_index.scss再层层转发，直接@use原始文件更清晰
@use 'colors' as c;
@use 'mixins' as m;
.button {
background-color: c.$primary;
@include m.focus-ring();
}
为什么 _index.scss 不是必须的，但往往值得建
很多团队习惯每个目录放一个 _index.scss，集中 @use 该目录下所有 Partial 并重新导出（@forward）。这不是 Sass 强制要求，但能减少上层文件的引入负担，也方便做 API 收口。
-
@forward 'variables'会把_variables.scss的内容透传出去，但不创建命名空间；加as v*可重命名导出项 - 如果
_index.scss里用了@use，那它只是普通消费者，不会自动转发；必须用@forward才能让上级文件“看到”被转发的内容 - 注意循环依赖：
a.scss@forward 'b'，b.scss又@use 'a'→ 编译失败 - 大型项目中，
_index.scss是收敛样式契约的好位置，比如只暴露$theme和theme()函数，隐藏内部实现细节
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
