@use 是 scss 模块化核心机制，强制命名空间访问以避免污染；直接替换 @import 会因未通过 namespace.$var 等方式访问而报错；@use 必须置于文件顶部（仅允许前置变量声明），配置需用 with() 语法一次性传入所有 !default 变量。
@use 是 SCSS 模块化的核心机制，它强制要求显式命名空间访问，避免隐式污染和重复编译 —— 不能简单替换成 @import 的写法，否则会报错或失效。
为什么直接替换 @import 会失败
常见错误是把 @import "utils" 改成 @use "utils" 后，直接写 $color-primary 或 @include clearfix，结果编译报错：变量/函数/mixin 未定义。这是因为 @use 默认启用命名空间隔离，所有成员必须通过 namespace.$var、namespace.function()、@include namespace.mixin() 访问。
-
@import把内容“合并”进当前作用域，全局可直接用 -
@use把模块当作独立对象加载，不自动挂载到全局 - 即使路径完全相同，
@use "utils"和@use "utils" as u的命名空间也不同，互不兼容
@use 后如何正确访问变量、函数和 mixin
假设你有 _colors.scss：
$primary: #007bff;
$secondary: #6c757d;
@function contrast-color($color) {
@return if(brightness($color) > 128, #000, #fff);
}
@mixin btn-base {
border: none;
padding: 0.5rem 1rem;
}
在主文件中这样用：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 默认命名空间（推荐）：
@use "colors";→ 访问colors.$primary、colors.contrast-color(#333)、@include colors.btn-base - 自定义别名：
@use "colors" as c;→ 访问c.$primary、c.contrast-color()、@include c.btn-base - 无命名空间（仅限自己写的局部模块）：
@use "colors" as *;→ 可直接写$primary、contrast-color()、@include btn-base，但风险高，不建议用于第三方或共享库
@use 必须放在文件最前面（除变量声明外）
@use 规则必须位于样式表顶部，且只能在它之前放变量声明（用于配置模块），其他任何规则（包括普通 CSS、@mixin、@function、甚至空行后的注释）都会导致编译失败。
- ✅ 正确：
$theme-color: #28a745; @use "colors" with ($primary: $theme-color);
- ❌ 错误：
.header { color: #333; } @use "colors"; // 编译报错：Invalid CSS after ".header": expected "{", was "{" - ❌ 错误：
@use "colors"; $size: 16px; // 不允许在 @use 后声明变量
配置模块时传参必须用 with() 语法
如果目标模块定义了 !default 变量（如 $radius: 4px !default;），需用 with 显式覆盖，不能靠先声明变量再 @use —— 那样无效。
- 模块
_border.scss：$radius: 4px !default; @mixin rounded { border-radius: $radius; } - 正确配置：
@use "border" with ($radius: 8px);→@include border.rounded生成border-radius: 8px - 错误写法：
$radius: 8px; @use "border"; // $radius 不会被模块读取
真正容易被忽略的是：模块内所有 !default 变量都必须在 with() 中一次性传入，漏掉一个就会回退到模块默认值，且不会警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
