直接替换@import为@use会报错，因@use默认不注入变量，需加命名空间前缀；迁移须按“变量/函数/混入→组件→页面”分层推进，并用@forward统一收敛入口。
直接把 @import 全局替换成 @use 会立刻报错、变量访问失败、样式重复或缺失——这不是字符串替换，而是模块系统升级，必须重理依赖流向和作用域边界。
为什么 @import 替换为 @use 后变量全报 Undefined variable
因为 @use 默认不注入变量到当前作用域，所有成员必须加命名空间前缀。你写 @use "variables" 后再用 $color-primary，Sass 会报错——它实际叫 variables.$color-primary。
-
@import "reset"→@use "reset"后，所有$reset-margin必须改成reset.$reset-margin - 原
@import "_mixins"中的@mixin flex-center，现在得写@include mixins.flex-center()（假设文件名是_mixins.scss） -
@use "utils" as *是非法语法（Dart Sass ≥5.0 明确禁止），别试图模拟全局行为
如何安全迁移：从底层工具模块开始
迁移顺序错了，上层组件立刻报错。必须按“变量/函数/混入 → 组件 → 页面”分层推进，先改最基础的 _variables.scss、_functions.scss 这类纯逻辑文件。
- 先确认所有被
@use的文件都以_开头（如_variables.scss），否则报No module with the name - 入口文件（如
main.scss）里，把@import "variables"改成@use "variables" as v，然后通篇搜$color-替换为v.$color- - 组件文件（如
_button.scss）里如果也用了$spacing-sm，不能靠“父文件已导入”来隐式获取，必须自己@use "variables" as v
怎么解决“每个组件都要写十几行 @use”的问题
用 @forward 建立收敛入口。老项目常有一个 all.scss 把所有 partial @import 一遍，迁移到 @use 后不能让每个组件都单独 @use 十几个文件。
- 新建
index.scss，里面只写：@forward "variables"、@forward "mixins"、@forward "functions"，不写@use - 组件中改用
@use "index" as i，调用i.$primary-color、@include i.flex-center() -
@forward "colors" hide $blue-900可防止下游误用未设计好的深色值 - 严禁在同一个文件里先
@forward "utils"再@use "utils"，Sass 会警告重复解析
@use 的硬性语法约束和常见编译失败点
@use 不是可选风格，是语法硬约束。错位、路径多写扩展名或下划线，都会让编译器拒绝执行。
-
@use必须是 SCSS 文件中第一个非注释、非空行的语句，不能嵌套在@if、@media或选择器内部 - 路径不带扩展名和下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 省略
as时，命名空间默认为文件名（variables.$primary-color），但不推荐省略——易与第三方库同名冲突 - 第三方包若仍用
@import，你无法用@forward包装它——得等库升级，或自己 fork 后手动改写
真正难的不是语法替换，而是要把过去“靠顺序和记忆维护”的变量关系，变成显式声明、可追溯、可封装的模块边界。漏掉一个命名空间，就可能让整个组件样式失效，且错误位置和实际原因往往相隔数个文件层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
