两个都是Sass中常用的导入方式
| 特性 | @import（已弃用） | @use（推荐使用） |
|---|---|---|
| 变量/函数/混入 | 自动全局引入 | 默认是私有的，需通过命名空间访问 |
| 多次引入 | 同一个文件会被引入多次 | 同一个文件只会被引入一次 |
| 命名冲突 | 容易出现命名冲突 | 避免冲突，使用命名空间隔离 |
| 编译行为 | 编译时会把多个文件合并为一个文件 | 模块化，不自动合并 |
| 是否被弃用 | ✅ 是，官方不推荐使用 | ✅ 否，是推荐使用方式 |
@import可以直接用
// _variables.scss
$main-color: blue;
// main.scss
@import 'variables';
body {
color: $main-color; // 可以直接使用
}
- 如果另一个文件也定义了
$main-color，会冲突。 - 多次
@import 'variables'，它会被编译多次。
@Use需要通过命名空间访问
// _variables.scss
$main-color: blue !default;
// main.scss
@use 'variables';
body {
color: variables.$main-color; // 通过命名空间访问
}
-
变量不会进入全局作用域，默认是私有的。
-
必须用命名空间访问（除非用
@use 'file' as *;）。 -
更适合模块化开发。
命名空间控制
@use 'variables' as v;
body {
color: v.$main-color;
}
如果你真的想像 @import 一样让所有东西变成全局（不推荐）：
@use 'variables' as *; // 小心命名冲突
