使用@use配合下划线开头的partial文件（如\_tokens.scss、\_mixins.scss）实现模块化，需命名空间、禁止as *、避免嵌套引入，并用@forward解耦依赖。
直接用 @use + _ 开头的 partial 文件，配合明确的命名空间和分层目录，就能实现真正可维护的模块化。别再用 @import 拼接全局变量了——它早被 Sass 官方弃用，且会导致变量覆盖、样式重复、调试困难。
怎么起名和组织文件才不会乱
Sass 只认以 _ 开头的文件为 partial，比如 _variables.scss、_mixins.scss。这类文件不会被单独编译成 CSS，只供 @use 或 @import 引入。
- 所有模块文件必须加下划线前缀，否则构建工具可能误编译出空 CSS 或报错
File to import not found - 基础配置类（颜色、断点、z-index）统一放
_tokens.scss或_foundations.scss - 行为封装类（响应式字体、流体排版）抽成
_mixins.scss，别把font-weight: 600单独写成$fw-semibold——除非全项目真有十几处用且会变 - 组件级样式如按钮、卡片，用语义化命名：
_button.scss、_card.scss，不要按页面拆成_home-header.scss这种难复用的粒度
@use 必须带命名空间，别偷懒写 as *
@use 默认启用模块作用域，变量、mixin 不会自动注入当前作用域。直接写 $color-primary 肯定报 Undefined variable。
- 正确写法：
@use "src/styles/tokens" as t;，然后用t.$color-primary - 基础层（颜色、断点）可用简短别名，如
as t；功能层（工具类、布局）建议语义化，如@use "src/styles/tools" as tool - 禁用
as *：一旦两个模块都定义了$radius，编译直接失败，而且你根本不知道冲突从哪来 -
@use必须放在文件最顶部，不能嵌在@media或选择器内部
如何避免“拆了文件但体积没变”
拆成 20 个 _xxx.scss 不等于瘦身。真正膨胀来自 @import 全量引入、@extend 爆炸、嵌套过深，而 @use 是按需加载的关键。
立即学习“前端免费学习笔记（深入）”；
-
@use只会把实际被引用的变量/mixin 编译进去；@import是文本拼接，哪怕只调一个函数，整个文件全塞进来 - 检查是否每个 partial 都在主入口（如
main.scss）里被显式@use，而不是靠通配符或漏引导致样式缺失 - 第三方库（如 Bootstrap Sass 版）若未适配
@use，可暂时混用，但必须确保顺序：先@use自己模块，再@import第三方，否则变量可能被覆盖 - 禁用 sourceMap：它会在 CSS 末尾追加 base64 字符串，体积暴增，上线前务必设
sourceMap: false
最易被忽略的一点：模块化不是文件越多越好，而是“谁改什么、谁用什么”能一眼看清。如果 _button.scss 里又 @use "mixins" 又 @use "tokens"，而 _mixins.scss 本身又依赖 _tokens.scss，那还是全量打包——得靠 @forward 封装接口，而不是靠路径堆叠。
