@use是唯一能真正切断全局污染的机制——它默认以文件名作命名空间，强制成员加前缀访问（如colors.$primary），同名变量可共存；而@import必致冲突，因其实质是文本拼接，后导入同名变量将静默覆盖前者。
@use 是唯一能真正切断全局污染的机制，@import 的命名冲突不是“可能”，而是“必然发生”——只要两个文件定义同名变量，后加载的就会静默覆盖前一个。
为什么 @import 一定会导致命名冲突
@import 不做隔离：它把整个被导入文件的内容像文本粘贴一样塞进当前作用域。所有 $color、@mixin reset、@function px-to-rem 全部平铺，没有边界。
- 你
@import "theme/dark"定义了$bg: #111，又@import "theme/light"定义了$bg: #fff→ 后者直接覆盖前者，$bg永远是#fff，调试时根本看不出哪来的值 - 第三方库（比如 Bootstrap 和自定义
_mixins.scss）都导出@mixin clearfix→ 编译器只认最后一个，行为不可控 - 重复
@import "utils"五次？Sass 就解析五次_utils.scss，生成冗余 CSS，热更新变慢
@use 怎么强制隔离命名空间
@use 默认以文件名（不含 _ 和 .scss）作命名空间，所有成员必须显式加前缀访问，不写前缀就报错：Undefined variable "$primary"。
-
@use "colors"→ 必须写colors.$primary、colors.tint()、@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 的模块系统有明确规则，踩中任意一条就编译失败。
-
@use必须在文件最顶部，不能包在@media、@if或选择器里；否则报Invalid CSS after "@use" - 路径必须指向下划线前缀的 partial 文件（如
_variables.scss），写@use "variables"才对；写@use "variables.scss"或@use "_variables"都会报No module with the name -
!default在@use下只生效一次：旧写法$primary: red !default在多个@import中可被反复“回退赋值”，但@use加载后值就固定了，后续@use不会再触发!default
最易被忽略的是路径和文件名约定——@use 不是语法糖，它依赖严格的 partial 命名（_xxx.scss）和相对路径语义，漏掉一个下划线或写错一级目录，就直接中断编译。这不是警告，是硬性限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
