直接替换@import为@use会报错，因作用域模型从全局污染变为命名空间隔离：@use不自动注入变量，必须通过vars.$color-primary访问；文件须以下划线开头（如_variables.scss），路径不能带.scss扩展名，且@use必须置于文件顶部，禁与@import混用。
直接替换 @import 为 @use 会报错，且样式/变量全部失效——这不是字符串查找替换能解决的，核心在于作用域模型彻底变了。
为什么@use一用就报$color-primary undefined？
因为 @use 不再把变量自动注入当前作用域，所有成员必须带命名空间访问。旧写法 $color-primary 现在得写成 vars.$color-primary（假设你 @use "variables" as vars）。
- 默认命名空间是文件名（不含
_和扩展名），@use "_variables"→ 命名空间是variables - 不能写
@use "variables.scss"，必须是@use "variables"（且文件实际叫_variables.scss） -
@use必须放在文件最顶部，前面不能有任何代码（包括注释） - 同一文件里混用
@import和@use会直接编译失败
第三方库（如 Bootstrap 5）怎么@use？
Bootstrap 5 支持 @use，但它的模块结构不是扁平的，必须按它定义的路径导入，不能瞎猜。
- 正确：
@use "bootstrap/scss/functions"、@use "bootstrap/scss/mixins" - 错误：
@use "bootstrap"（它没导出顶层模块）、@use "node_modules/bootstrap/scss/_functions"（路径冗余且含_） - 若用 Vite 或 Webpack，确保
sass版本 ≥ 1.33.0，sass-loader≥ 12.0 - Bootstrap 4 不支持
@use，强行用会报错，只能降级 Dart Sass 或加兼容 wrapper
怎么让老项目不重写所有调用就能迁移？
靠 @forward 做渐进式封装，而不是全量改业务文件。
立即学习“前端免费学习笔记（深入）”；
- 新建一个
index.scss，里面只写：@forward "variables" as v-*、@forward "mixins" as m-* - 原
main.scss改为：@use "index" as i，然后用i.v-primary、@include i.m-text-truncate - 组件内部需要局部变量时，单独
@use "variables"，别依赖全局隐式注入 - 禁止在
@forward后再@use同一模块——Sass 会警告重复解析
最容易被忽略的是路径和文件名规则：@use 只认下划线开头的 partial 文件（_variables.scss），且不支持 CSS 直引、不自动补扩展名、相对路径从当前文件起算——错一个字符就 No module with the name。
