@use能避免CSS命名冲突，是因为它强制变量、混入和函数进入独立命名空间，而@import是无隔离的全局拼接——后者必然覆盖，前者必须显式前缀访问；@import不创建作用域，仅做文本粘贴，后导入同名变量静默覆盖前者，@use则通过文件名默认命名空间、强制前缀访问、禁止混用@import等机制彻底隔离模块。
@use 能避免 CSS 命名冲突，是因为它强制变量、混入和函数进入独立命名空间，而 @import 是无隔离的全局拼接——后者必然覆盖，前者必须显式前缀访问。
为什么 @import 一定会导致变量静默覆盖
@import 不创建作用域，只是把目标文件内容原样“粘贴”进当前文件。所有 $color、@mixin reset、@function px-to-rem 全部平铺到同一层。
- 你
@import "theme/dark"定义了$bg: #111，又@import "theme/light"定义了$bg: #fff→ 后者直接覆盖前者，$bg永远是#fff - 两个第三方库都导出
@mixin clearfix→ Sass 只保留最后一个，行为不可预测 - 重复
@import "utils"五次？Sass 就解析五遍_utils.scss，生成冗余 CSS，热更新变慢
@use 是怎么强制隔离命名空间的
@use 默认以文件名（不含 _ 和 .scss）作命名空间，所有成员必须加前缀才能访问；不加就报错：Undefined variable "$primary"。
-
@use "colors"→ 必须写colors.$primary、@include colors.card-shadow -
@use "colors" as c→ 只能用c.$primary，colors.$primary反而会报错 - 连字符保持原样：
c.$text-sm不能写成c.$textSm，Sass 不做驼峰转换 -
dark.$bg和light.$bg是两个完全独立变量，互不影响
迁移时最常踩的三个硬坑
不是把 @import 替换成 @use 就完事——Dart Sass 的模块系统有硬性规则，任一条不满足就编译失败。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
@use必须在文件最顶部，不能包在@media、@if或选择器里；否则报Invalid CSS after "@use" - 路径必须指向带下划线的 partial 文件（如
_variables.scss）：@use "variables"✅，@use "_variables"或@use "variables.scss"❌，报No module with the name -
!default在@use下只生效一次：旧写法$primary: red !default在多个@import中可被反复“回退赋值”，但@use加载后值就固定了
混用 @use 和 @import 会导致整文件降级
只要一个文件里出现任意一行 @import，Sass 编译器就会把整个文件（及其所有依赖链）降级为 legacy 模式，所有 @use 失效，命名空间消失，变量回归全局裸名访问。
- 常见现象：
@use "vars" as v后写v.$color-text报错，但删掉同一文件里某处残留的@import "reset"就立刻正常 - 第三方库（如 Bootstrap 5.2）若仍用
@import引入，也会触发降级，导致你自己的模块无法互通 - Vue/Angular 项目中
main.scss里哪怕只有一行@import，整个样式系统就失去模块隔离能力
真正起作用的不是“用了 @use”，而是“彻底不用 @import”——任何残留都会让模块化机制失效。路径命名、文件结构、团队协作规范，三者缺一不可。
