直接替换@import为@use必然失败，因@use是模块系统重构：变量/混入须加命名空间（如colors.$primary-color），文件须以下划线开头（_vars.scss），路径须精确匹配，纯CSS需包装，第三方库须已适配。
直接把 @import 换成 @use 必然失败，这不是语法替换问题，而是模块系统重构——必须同步处理命名空间、文件名规范、路径写法和第三方兼容性。
为什么所有变量和混入都报 “Undefined”？
因为 @use 默认不注入全局作用域，所有成员必须显式通过命名空间访问。你写 $primary-color，Sass 只查全局；但它实际在 colors.$primary-color 里。
- 默认命名空间 = 文件名（不含
_和.scss），例如@use "src/vars"→ 后续必须用vars.$font-size-base - 可用
as自定义前缀：@use "src/vars" as v→ 调用v.$spacing-md -
as *能解构导入，但仅限单个模块；多个as *会静默覆盖同名变量，且失去封装性 - 旧代码中所有裸调用（如
@include clearfix）必须补上前缀：@include utils.clearfix
@use 总提示 “No module with the name” 怎么办？
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 partial 文件（如 _colors.scss），路径必须与文件系统严格一致。
- 被导入文件必须以
_开头，@use "colors"却只有colors.scss→ 报错；得改名为_colors.scss - 相对路径从当前文件出发，不是项目根目录：
@use "../theme/colors"表示上一级再进theme/colors.scss - 若文件是
src/scss/_colors.scss，你在src/components/button.scss里写@use "colors"会失败；得写@use "../../scss/colors"或配--load-path=src/scss - 路径含空格或中文 → Dart Sass 直接拒绝解析
怎么引入 normalize.css、Bootstrap 这类第三方 CSS 或 Sass 库？
@use 不支持直引 .css 文件，也不兼容未适配的旧版 Sass 库（如 Bootstrap 4）。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 文件（如
normalize.css）必须包装：_normalize-wrapper.scss内容仅一行：@import "node_modules/normalize.css/normalize.css";，再@use "normalize-wrapper" - Bootstrap 5.3+ 支持
@use，但路径和结构已变：@use "bootstrap/scss/functions" as bs→ 调用bs.str-to-num("12px") - Bootstrap 4.x 或未声明
@use兼容的库，@use会直接报错，无法迁移；只能保留@import并包裹进独立 partial，避免污染主模块 - 第三方库若使用
!default做配置回退，@use ... with ($var: value)是唯一可控传参方式；多次@use不触发重新赋值
如何组织入口文件避免主样式堆满 @use？
@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误），正确做法是下沉聚合逻辑到统一入口文件。
- 在设计系统根目录建
_index.scss，里面逐行写：@forward "colors"; @forward "mixins"; @forward "breakpoints" show breakpoint-sm, breakpoint-lg; - 下游只需
@use "design-system/index" as ds，就能用ds.$primary-color、ds.text-truncate() -
@forward ... as prefix-可批量加前缀，如@forward "mixins" as util-→@include util-text-truncate -
show/hide精确控制暴露粒度，隐藏内部实现（如$_internal-breakpoint不会被转发）
最易被忽略的是：Dart Sass 是唯一支持 @use 和 @forward 的实现，Node Sass 已停更，Webpack + sass-loader 需 ≥12.0 + sass ≥1.33.0；路径别名若没透到 Sass 解析层（如 Vite 中未配 scss.additionalData），也会静默失败。
