@use不能直接替代@import是因为它默认启用严格命名空间隔离，所有变量、混入、函数必须显式通过命名空间访问（如colors.$primary），而@import是全局合并易冲突；且@use只识别下划线前缀的partial文件（如\_vars.scss），路径需精确匹配，不支持css直引或隐式扩展。
直接用 @use 替代 @import 不是字符串替换，而是重构模块边界——不改命名空间访问方式，编译必报 Undefined variable 或 Undefined mixin 错误。
为什么 @use 导入后变量/混入全报错？
因为 @use 默认创建命名空间，所有成员必须显式加前缀访问。你写 $primary-color，Sass 会找全局变量；但实际它藏在 colors.$primary-color 里。
- 默认命名空间 = 文件名（不含
_和.scss），比如@use "src/vars"→ 前缀是vars - 用
as可自定义前缀：@use "src/vars" as v→ 后续必须写v.$spacing-md -
as *能解构导入，但仅限单个模块且放弃封装性，多模块时别用 - 文件名必须带下划线前缀（如
_vars.scss）才被识别为 Sass partial；写@use "vars"却只有vars.scss（没下划线），会报No module with the name "vars"
@use 路径写不对就找不到模块？
@use 不自动补扩展名、不猜文件名、不搜子目录——路径必须精确匹配文件系统中带下划线的 partial 文件。
- 相对路径从当前文件出发，不是项目根目录：
@use "../theme/colors"表示上两级再进theme/colors.scss - 若文件是
src/scss/_colors.scss，而你在src/components/button.scss里写@use "colors"，会失败；得写@use "../../scss/colors"或配--load-path=src/scss - 不能
@use "reset.css"：纯 CSS 文件不支持，需新建_reset-wrapper.scss，里面用 CSS 规范的@import "node_modules/normalize.css/normalize.css"包一层，再@use "reset-wrapper" - 路径里不能有空格或中文，否则 Dart Sass 直接拒绝解析
怎么让多个模块的同名 $spacing 不打架？
根本不用“让它们不打架”——@use 天然隔离，冲突只发生在你主动破坏命名空间时。
- 模块 A 写
$spacing: 8px，模块 B 也写$spacing: 12px，各自@use "a"和@use "b"后，调用分别是a.$spacing和b.$spacing，互不影响 - 错误做法：
@use "a" as *+@use "b" as *→ 第二个会静默覆盖第一个的$spacing，且无警告 - 想复用某变量值？用
with显式传参：@use "theme" with ($font-size-base: 16px)，注意!default只在首次定义生效，@use不触发回退赋值 - 隐藏内部细节：在源文件里用
$_internal-flag: true（下划线开头），@use后外部无法访问
第三方库（如 Bootstrap）能直接 @use 吗？
Bootstrap 5.3+ 支持，但结构和旧版完全不同；4.x 或未适配的库，@use 会直接失败。
- 官方推荐方式：
@use "bootstrap" with ($enable-grid-classes: false)，再单独@use "bootstrap/scss/functions" - 别写
@use "bootstrap/scss/_functions"—— 下划线文件不能作为入口，会报错 - 遇到
Module cycle detected？说明 A@useB，B 又@useA，而@import会静默忽略这种循环，@use则强制报错，必须拆解依赖 - Node Sass 已停更，
@use和@forward仅支持 Dart Sass（sassnpm 包），Webpack 用户需确认sass-loader ≥ 12.0且sass ≥ 1.33.0
最易被忽略的点：迁移不是改语法，而是重审模块职责——@use 后每个文件都该有明确的“谁提供什么”，而不是靠顺序覆盖变量。一旦把 @use 当成 @import 的换皮写法，问题只会推迟爆发，不会消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
