@use本身不生成CSS，它仅加载模块、建立命名空间并挂载成员；真正输出样式需显式调用混入、编写选择器、使用@extend或@forward透出内容。
直接把 @import 换成 @use 不会生成 CSS，反而会编译失败——@use 本身不输出任何 CSS，它只加载模块；真正生成样式的是你后续写的规则、@include、@extend 或 @forward。
为什么 @use 本身不生成任何 CSS
@use 是模块加载指令，不是样式注入指令。它只做三件事：解析目标文件、建立命名空间、挂载变量/混入/函数。哪怕你 @use "colors" 后什么也不写，也不会输出一行 CSS。
常见错误现象：替换后页面样式全丢，检查发现只是 @use 加载了变量，但没调用任何混入、没写任何选择器。
- 旧写法
@import "mixins"; @include clearfix;→ 清除浮动样式被输出 - 新写法
@use "mixins";→ 什么都不会输出，必须显式写@include mixins.clearfix; - 想让某个 Sass 文件“自动生效”（比如重置样式），不能靠
@use，得用@forward+ 入口文件聚合，或改用包装层@import
@use 后怎么让 CSS 真正生成出来
必须通过具体使用行为触发输出：写选择器、调用混入、扩展占位符、或在 @forward 中透出并被下游使用。
立即学习“前端免费学习笔记（深入）”；
- 变量本身不生成 CSS：
colors.$primary只是值，要生成样式得写color: colors.$primary; - 混入必须显式调用：
@include buttons.primary-button;才会吐出对应规则 - 占位符需配合
@extend：@extend %reset;才会把%reset的声明合并进来 - 纯变量文件（如
_variables.scss）只被@use加载时，完全不参与 CSS 输出流程
如何安全迁移旧的 @import 样式注入逻辑
旧项目里常有 @import "reset"; 这种“导入即生效”的写法，迁移到 @use 时不能照搬——因为 @use "reset" 不会执行其中的 CSS 规则。
- 若
_reset.scss里全是顶层 CSS 规则（无变量/混入），必须改造成包装层：@import "node_modules/normalize.css/normalize.css";，再用@use "_reset-wrapper" as *;（注意：仅限单个包装层） - 更推荐做法：把这类“副作用文件”统一收口到项目主入口（如
main.scss），在那里用@import保留（仅此处），其余地方全部@use；但前提是构建工具允许混合模式（多数现代 CLI 已禁止） - 检查是否误删了原本在
@import后面紧跟着的规则——迁移后这些规则还在，但可能因变量访问失败而被跳过，导致样式缺失
容易被忽略的关键点
最常被跳过的不是语法，而是作用域边界意识：@use 加载的模块内容不会“自动冒泡”到父级；你在 button.scss 里 @use "theme"，并不意味着 card.scss 也能用 theme.$border-radius——每个文件都得自己 @use，或者通过 @forward 统一暴露。
另一个硬限制：只要文件中存在任意一行 @import，整个文件及其所有依赖都会降级为 legacy 模式，@use 命名空间失效，$primary 又能裸写——但这不是修复，是退化。查不到样式时，先全局搜 @import。
