核心是通过主入口文件（如style.scss）用@use按序引入带下划线的partial文件（如_base.scss），Sass据此构建依赖图合并输出；@use启用命名空间避免冲突，而@import已弃用且会全局污染。
用 @use 或 @import 导入多个 Sass 文件到主入口文件
合并输出的核心不是“打包工具配置”，而是让 Sass 编译器把多个源文件当作一个逻辑单元处理。必须有一个主入口文件（比如 _index.scss 或 main.scss），它不带下划线也能被识别为可编译入口，但通常建议用带下划线的 _base.scss、_layout.scss 等作为模块，仅用无下划线的 style.scss 作为唯一编译目标。
在 style.scss 中按需引入：
@use 'base'; @use 'components/button'; @use 'components/card'; @use 'theme/dark';
注意：@use 是推荐方式（Sass 1.23+），它默认启用命名空间，避免变量/混入冲突；如果项目还在用旧写法，@import 也能合并，但它已弃用，且会全局污染作用域。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
@use 'button'却报错Can't find stylesheet to import→ 路径没配对，Sass 默认只查当前目录和--load-path指定的路径 - 多个文件定义了同名
$primary-color，@import下后生效的是最后一个，@use下则必须显式通过as别名区分
确保所有被导入文件都是“部分文件”（partial）
Sass 规定：以 _ 开头的文件（如 _variables.scss）不会被单独编译成 CSS，只会被 @use 或 @import 时内联进来。这是实现“多源一出”的关键机制。
必须检查：
- 所有被
@use的文件名都带前导下划线，否则编译器可能尝试单独输出它，造成冗余 CSS 或路径冲突 - 不要在构建脚本里把多个
.scss文件列为目标（如sass a.scss b.scss --out-dir css/），这会生成多个输出，违背“合并”意图 - Webpack / Vite 等工具中，确保 CSS 加载器只指向那个唯一的入口文件，例如
import './style.scss';，而不是分散 import 多个
命令行或构建工具只需编译单个入口文件
只要入口文件正确组织了 @use 关系，执行一次编译就自动包含全部依赖：
sass style.scss css/bundle.css
或者带 watch：
sass --watch style.scss:css/bundle.css
参数差异影响明显：
- 加
--no-source-map可跳过 map 生成，减小体积；但调试时建议保留 - 用
--style=compressed输出压缩版，适合生产环境 - 若用
--load-path=node_modules，就能直接@use 'sass:math'或@use '~@mylib/core'（需对应配置别名）
容易踩的坑：在 package.json scripts 里写成 "build:css": "sass src/*.scss dist/" —— 这会遍历所有 .scss 并分别编译，根本没走合并逻辑。
警惕 CSS 顺序依赖和重复输出
Sass 合并不是简单拼接字符串，而是按 @use / @import 的书写顺序解析依赖图。这意味着：
- 变量和函数必须在使用前声明，所以
@use 'variables'通常要放在最前面 - 混入（
@mixin）和占位符选择器（%reset）也受顺序约束，跨文件调用时尤其要注意 - 如果两个模块都
@use 'shared/utilities'，Sass 内部会去重，不会重复注入 CSS；但若误用@import且路径不同（如@import '../utilities'和@import 'utilities'），就可能重复输出
真正难调试的是隐式顺序问题：比如 dark.scss 覆盖了 base.scss 里的选择器，但因为 @use 'dark' 写在后面，CSS 规则才生效——这种依赖关系不会报错，但改顺序就破样式。
