sass中@import升级@use的使用区别与案例

在 Sass 中，@import 和 @use 都用于模块化代码，但二者有显著区别。以下是主要差异和具体案例说明：

---

核心区别对比

特性

@import

(旧版)

@use

(新版)

作用域

全局作用域（变量/混合易冲突）

局部作用域（需通过命名空间访问）

重复加载

可能多次加载同一文件

自动保证单例加载（仅加载一次）

命名空间

无命名空间（直接访问成员）

默认文件名作为命名空间（可自定义）

私有成员

不支持（所有成员可被外部访问）

支持（-

或_

前缀变量为私有）

跨文件依赖

依赖关系混乱

显式依赖关系（更易维护）

---

案例说明 1. 基础使用对比 // ⚠️ @import 方式 // _variables.scss $primary-color: #3498db; // main.scss @import 'variables'; .button { color: $primary-color; } // 🔧 @use 方式 // _variables.scss $primary-color: #3498db; // main.scss @use 'variables' as vars; .button { color: vars.$primary-color; } 2. 命名空间冲突解决 // 文件结构 // _theme.scss $color: red; // _utils.scss $color: blue; // ❌ @import 的冲突 @import 'theme'; @import 'utils'; .text { color: $color; } // 输出 blue（后者覆盖前者） // ✅ @use 的隔离 @use 'theme'; @use 'utils'; .text { color: theme.$color; // red background: utils.$color; // blue } 3. 私有成员保护 // _config.scss $-private-var: 10px; // 私有变量（仅文件内可用） $public-var: 20px; // 公共变量 // ❌ @import 无法隐藏 @import 'config'; .element { margin: $-private-var; } // 仍可访问 // ✅ @use 保护私有 @use 'config'; .element { margin: config.$public-var; // 正常 // padding: config.$-private-var; // 报错！ } 4. 按需加载机制 // 多次引用同一文件时： // ❌ @import 重复加载 @import 'module'; @import 'module'; // 重复编译 // ✅ @use 智能单例 @use 'module'; @use 'module'; // 无重复问题

---

迁移建议 逐步替换：优先在新增文件中使用 @use，逐步替换旧 @import命名空间简化：通过 @use 'module' as *; 省略命名空间（慎用，可能引发冲突）结合 @forward：使用 @forward 转发模块（适合工具库开发）注意私有变量规则: 使用@use时需要注意 -或者_ 表示私有变量，@import旧代码可能会定义-或者_开头的变量。使用@use引入时会报错

---

总结 弃用 @import：Sass 官方已计划逐步弃用 @import，推荐使用 @use模块化优势：@use 通过作用域隔离和显式依赖，提升代码可维护性未来兼容性：新项目应直接采用 @use + @forward 体系