Sass Partial 是以 _ 开头的 .scss 文件，如 _variables.scss，不会被单独编译，仅能通过 @use 或 @import 被主入口文件引入；@use 推荐用于新项目，具备模块作用域，避免命名冲突。
什么是Sass Partial？为什么不能直接编译\_filename.scss
Sass Partial 是以 _ 开头的 .scss 文件，比如 _variables.scss 或 _mixins.scss。它本身**不会被单独编译成 CSS**，只用于被 @use 或 @import 引入——这是最容易踩的坑：手误删了下划线，或忘了加 _，结果 Sass 编译器默默把它当普通文件处理，生成空 CSS 或报错 File to import not found。
常见错误现象：
- 改了
_buttons.scss，但页面样式没更新 → 实际是没被任何入口文件引用 - 直接运行
sass _layout.scss→ 报错Invalid CSS after "...": expected 1 selector or at-rule, was "..."
正确做法：
- 所有模块化拆分的文件，统一用
_前缀命名 - 只在主入口文件（如
main.scss）里用@use或@import显式引入 - 确保构建工具（Vite、Webpack、sass CLI）配置的是编译
main.scss，而非通配符**/*.scss -
@use默认启用**模块作用域**：被引入的_variables.scss里的$color-primary不会自动暴露到当前文件，必须写成variables.$color-primary（可起别名简化） -
@import是全局合并：所有变量、mixin、CSS 规则全平铺进当前作用域，容易发生命名冲突，比如两个_mixins.scss都定义了@mixin clearfix() -
@use不支持循环引入（A@useB，B 又@useA），而@import会静默失败或重复注入 - 新项目一律用
@use，入口文件写法示例：@use 'base/variables' as var;<br>@use 'components/buttons';
- 旧项目迁移时，注意
@import中的路径写法（不带.scss后缀，且不能有_）；@use路径规则相同，但必须明确指定命名空间 - 如果依赖第三方库（如 Bootstrap Sass 版），查清它是否已适配
@use——部分老版本仅支持@import -
配置型内容：颜色、断点、字体尺寸等全局常量 →
_variables.scss -
逻辑型内容：mixin、function、placeholder（如
%visually-hidden）→_mixins.scss、_functions.scss -
高复用 UI 片段：按钮、卡片、表单控件等原子组件 →
_buttons.scss、_forms.scss - 每个页面都建一个
_home.scss、_about.scss→ 这些应归入「页面级覆盖」，由 JS 动态加载或通过 BEM 命名隔离，不该走 Sass 拆分 - 把单条媒体查询规则拆成
_mq-mobile.scss→ 断点应统一管理在_variables.scss，具体响应式写在组件内部更清晰 - 为每种状态写独立文件，如
_button-hover.scss→ 状态应和基础样式共存于同一 Partial，否则调试时要跳 5 个文件 - Vite 项目中写
@use '@/styles/_variables'→@/是 Vue 别名，Sass 不认识，必须配置includePaths: ['src/styles'] - Webpack + sass-loader 中用相对路径
@use '../base/_variables'，但入口文件位置一变就失效 → 改用绝对路径别名（如@use '~styles/base/_variables'）并配好resolve.alias - NPM 包中的 Partial（如
@use 'sass:math'）能直接用，但自定义包需在package.json中声明"sass": {"main": "index.scss"}，否则@use 'mylib'会失败
@use 和 @import 在模块拆分中怎么选
@use 是 Sass 4.0+ 推荐的模块机制，@import 已被标记为 deprecated。二者行为差异直接影响变量作用域和样式污染风险。
立即学习“前端免费学习笔记（深入）”；
关键区别：
实操建议：
哪些内容适合抽成 Partial？拆过头反而难维护
不是所有 CSS 都值得拆。拆分目标是提升可定位性与复用率，不是制造更多文件。真正值得独立成 _xxx.scss 的，只有三类：
容易拆过头的情况：
构建工具对 Partial 的路径解析容易出什么问题
Sass 编译器本身不负责路径查找，它依赖构建工具提供的 includePaths（或 Vite 的 css.preprocessorOptions.sass.additionalData）。路径写错，@use 就找不到 Partial。
典型错误：
验证方式很简单：删掉 @use 行，看编译是否报 Can't find stylesheet to import。如果报，说明路径或 includePaths 没对上；如果不报，但样式没生效，大概率是 @use 后没调用 mixin 或没输出 CSS 规则。
Partial 模块化的真正难点不在语法，而在团队对「什么该拆、拆到哪层、路径怎么管」达成一致。文件多了没人愿意改 includePaths，命名空间乱了没人记得清 buttons.$size-large 还是 ui.$size-large ——这些细节比语法本身更消耗协作成本。
