直接替换@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），且路径必须精确匹配文件系统。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 被导入文件必须以 _ 开头，写成 _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 文件做包装层。

• 新建 _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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！