@use通过强制模块化隔离解决@import的命名空间污染：每个@use创建独立命名空间，默认以文件名作前缀，成员须显式加前缀访问，避免隐式覆盖与冲突。
为什么 @use 能解决 @import 的命名空间污染问题
@import 会把被导入文件的全部变量、混合宏、函数直接注入当前作用域，多个 @import 同一个文件时，还会重复解析和合并样式，导致命名冲突和意外覆盖。比如两个模块都定义了 $primary-color，后 @import 的会直接覆盖前一个。
@use 则强制启用模块化隔离：每个 @use 语句创建独立命名空间，默认以文件名（不含扩展名）为命名前缀，所有成员必须显式通过该前缀访问，从根本上切断隐式污染。
- 未加前缀直接写
$primary-color会报错：Undefined variable. - 必须写成
theme.$primary-color或colors.$primary-color，前缀由as子句或文件名决定 - 同一文件多次
@use不会重复编译，Sass 内部自动去重
@use 的基本语法与常见 as 写法
最简形式是 @use "path/to/file"，Sass 自动用文件名（如 _buttons.scss → buttons）作为命名空间。但实际项目中更常用 as 显式控制前缀，避免歧义或过长名称。
-
@use "src/styles/vars" as v;→ 访问v.$font-size-base -
@use "src/styles/vars" as *;→ 解构导入（仅限单个模块，且放弃命名空间，慎用） -
@use "src/styles/vars" as theme;→ 推荐，语义清晰，theme.$spacing-sm - 路径不加
.scss，下划线前缀（_vars.scss）可省略，但不能混用：@use "_vars"和@use "vars"被视为不同模块
迁移时最常踩的三个坑
从 @import 切到 @use 不是全局替换字符串，很多旧写法会直接失效。
-
@import中的!default变量在@use下不会“回退赋值”——@use是静态导入，变量一旦被@use加载就确定了值，!default只在首次定义时生效，后续@use不会重新触发 -
@import "bootstrap/scss/functions"这类只导出函数/混合宏的文件，迁移到@use后必须显式调用前缀：bs.str-to-num("12px")，不能直接写str-to-num("12px") - 循环依赖会直接报错：
A @uses B且B @uses A→Module cycle detected.，而@import会静默忽略或产生不可靠结果
如何让第三方库（如 Bootstrap）也走 @use 流程
Bootstrap 5.3+ 已原生支持 @use，但需注意其官方推荐结构：先 @use "bootstrap" with ($enable-grid-classes: false)，再 @use "bootstrap/scss/functions" 等子模块。旧版 Bootstrap 4 或其他未适配的库，无法直接 @use，只能保留 @import 或借助构建工具做兼容层。
- 确认版本：
npm list bootstrap，低于 5.3 的不要强上@use - 配置项必须写在主模块
@use "bootstrap"里，子模块（如mixins）不接受with - 若项目同时用
@use和遗留@import，Sass 编译器会警告：Using @import with modules is deprecated，但暂不报错；建议分批迁移，优先处理自定义模块
真正麻烦的不是语法转换，而是旧项目里那些散落在各处、没加前缀的变量引用——它们不会报错，但会默默变成 undefined，最终生成无效 CSS。动手前最好用 IDE 全局搜索 $ + 变量名，逐个核对来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
