直接替换@import为@use会编译失败，因其本质是模块系统重构而非语法升级；必须同步调整访问方式（加命名空间前缀如colors.$primary）、文件命名（须以下划线开头如_vars.scss）、路径写法（精确匹配、不自动补扩展名），否则变量/混入全报错且找不到模块。
直接替换 @import 为 @use 会编译失败——这不是语法升级，而是模块系统重构，必须同步调整访问方式、文件命名和路径写法。
为什么 @use 替换 @import 后变量全报错？
因为 @use 默认启用严格命名空间隔离：所有变量、混入、函数不再自动注入全局作用域，必须显式加前缀访问。你写 $primary，Sass 会找全局变量；但它实际在 colors.$primary 里。
- 默认命名空间 = 文件名（不含
_和.scss），例如@use "src/vars"→ 前缀是vars - 用
as可自定义前缀：@use "src/vars" as v→ 后续必须写v.$spacing-md -
as *能解构导入，但仅限单个模块且放弃封装性；多个@use ... as *会静默覆盖同名成员 - 旧代码里所有裸变量（如
$font-size-base）和裸混入（如@include clearfix）都得补上前缀
@use 找不到模块：路径和文件名怎么写才对？
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 partial 文件（如 _vars.scss），且路径必须精确匹配文件系统。
- 被导入文件必须以
_开头，写成_vars.scss；写vars.scss就报No module with the name "vars" - 相对路径从当前文件出发，不是项目根目录：
@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 直接拒绝解析
如何引入第三方 CSS 库（比如 normalize.css）？
@use 不支持直引 .css 文件，会报 Invalid CSS after ""；必须用一个本地 _xxx.scss 文件做包装层。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 新建
_normalize-wrapper.scss（注意下划线前缀），内容只有一行：@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写变量、混入或其它
@use，否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper" as *;（或带命名空间） - 别用
@use "normalize.css"—— 这是无效路径，也不是合法模块名
怎么组织多个组件文件才能避免主文件堆满 @use？
@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误），正确做法是下沉聚合逻辑到 _index.scss 入口文件。
- 在组件目录下建
_index.scss，里面逐行写：@use "button"; @use "card"; @use "form"; - 主文件只需一行：
@use "components";—— Sass 会自动加载同目录下的_index.scss - 别把聚合逻辑放在主文件里，否则失去模块边界、难以复用、调试时定位困难
- 如果多个业务模块都要用同一套工具函数，优先在设计系统层
@forward一次，下游只@use设计系统入口
最常被忽略的是：迁移不是字符串替换，而是重写引用链路。哪怕只改一个 @use，所有下游调用点都得同步加前缀——漏掉一处，就报 Undefined variable 或 Undefined mixin。
