Partial 是防止样式失控的第一道隔离墙，必须以 _ 开头命名，否则会被误编译为 CSS；@use 引入需显式路径和扩展名；变量/mixin 需通过命名空间调用，强制模块边界与契约设计。
因为直接把所有样式堆在一个 main.scss 里，不出三个月就会变成没人敢改的“样式沼泽”——Partial 不是锦上添花的功能，而是防止项目样式失控的第一道隔离墙。
Partial 文件名必须以 _ 开头，否则会被误编译
如果你写了 variables.scss 而不是 _variables.scss，Dart Sass 会把它当作入口文件尝试单独编译成 CSS，结果生成一个空的、无用的 variables.css，还可能和真正需要的入口文件冲突。这不是命名偏好问题，是编译器的行为规则。
-
_是 Sass 编译器识别 “不输出 CSS” 的唯一标记，没这个下划线，就不是 Partial - 哪怕你只用
@use引入它，只要没下划线，它仍会被扫描、尝试编译 - 常见翻车：Git 同步时忽略大小写，
_Variables.scss在 macOS 上能过，在 Linux CI 上直接报错
@use 引入 Partial 时路径必须显式、精确
@use 'colors' 这种写法在 Dart Sass 中几乎必然失败——它既没后缀，也没路径，更没说明从哪开始找。Sass 不做 Node.js 那套模块解析，一切靠你写清楚。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须带扩展名或省略后缀（但文件名必须严格匹配
_colors.scss或_colors.sass） - 路径是相对于当前文件位置的，不是项目根目录；
@use '../styles/_colors'和@use '@/styles/colors'完全是两回事 - 没配别名（alias）时，多一层目录就要多写一个
../，@use '../../../theme/_breakpoints'是可读性灾难 - Vite/Webpack 中建议配置
resolve.alias映射@→src/styles，然后统一用@use '@/mixins' as mixins
变量和 mixin 不自动注入作用域，这是防污染设计，不是 bug
写完 @use '_colors' as color 后直接写 color: $primary 报错？对，这就是预期行为。Sass 故意切断了隐式全局污染链。
立即学习“前端免费学习笔记（深入）”；
- 所有变量、函数、mixin 都必须通过命名空间调用：
color.$primary、color.text-primary()、@include color.focus-ring() - 想解除命名空间可以用
@use '_colors' as *，但仅限可信的、不会与其他 Partial 冲突的局部场景（比如组件内部） - 如果两个 Partial 都导出
$spacing，@use会强制你指定不同别名，避免静默覆盖——这是你在@import时代永远得不到的保护
真正容易被忽略的不是语法细节，而是思维切换：Partial 不是“把大文件切小”，而是构建一套有边界的样式契约——每个 _ 文件都该明确回答三个问题：它提供什么？它依赖谁？它允许谁用？漏掉任何一个，模块化就退化成文件夹分类。
