今天在写公司组件库的时候发现了一个小问题，看到有的同事会使用@import去导入，有的同事会使用@use去导入。于是本人秉持着知之为知之，不知为不知的态度，决定来一探究竟。

区别

上面表格就列出了二者的区别，然后我们来重点看一下重复加载和命名空间。

重复加载
当使用 @import 导入模块时，如果在多个文件中多次导入同一个文件，可能会导致重复加载的问题。这意味着被导入的文件将在每个使用了 @import 的文件中都被加载一次，导致样式表中包含多份相同的样式，从而影响性能和增加文件大小。
让我们通过一个示例来说明重复加载的问题：
假设有以下两个 SCSS 文件：
文件：_variables.scss

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

文件：styles1.scss

// styles1.scss

@import 'variables';

body {
  background-color: $primary-color;
}

文件：styles2.scss

// styles2.scss

@import 'variables';

button {
  background-color: $secondary-color;
}

在这个示例中，我们有两个样式文件 styles1.scss 和 styles2.scss，它们分别使用 @import 导入了同一个 _variables.scss 文件。由于 styles1.scss 和 styles2.scss 都导入了 _variables.scss，在编译这两个样式文件时，_variables.scss 将被加载两次。
编译后的结果如下所示：
编译后的 styles1.css：

/* _variables.scss 中的内容被导入到这里 */
body {
  background-color: #007bff;
}

编译后的 styles2.css：

/* _variables.scss 中的内容被导入到这里 */
button {
  background-color: #6c757d;
}

可以看到，styles1.css 和 styles2.css 中都包含了 _variables.scss 中定义的样式，而实际上 _variables.scss 中的内容只需要加载一次，然后在多个样式文件中共享。重复加载会增加 CSS 文件的大小，影响性能，并可能导致样式冲突问题。而使用 @use 导入方式可以避免重复加载问题，因为它会确保每个模块只加载一次，即使在多个文件中导入。这样可以优化性能，并保持样式表的精简和一致性。

命名空间
@import是没有命名空间的，我们来介绍一下@use的命名空间是如何作用的。
1. 不使用as,则直接将文件名当作命名空间
在 SCSS 中，当在 @use 后面直接跟上文件路径，并且没有使用 as 关键字指定命名空间，表示将导入的模块内容整体作为一个命名空间，并且使用被导入文件的名称作为命名空间的标识。
假设有以下两个 SCSS 文件：
文件：_variables.scss

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

文件：styles.scss

// styles.scss
@use 'variables.scss';

body {
  background-color: variables.$primary-color;
}
button {
  background-color: variables.$secondary-color;
}

在这个示例中，styles.scss 使用 @use 直接导入了 variables.scss 文件，而没有使用 as 关键字指定命名空间。这意味着 _variables.scss 中的所有内容将被合并到 styles.scss 中，并且使用 variables 作为命名空间的标识。注意，因为 @use 创建了命名空间，所以我们在 styles.scss 中需要使用 variables.$primary-color 和 variables.$secondary-color 来访问 _variables.scss 中定义的变量。

2. 使用as xxx，则以后面命名的变量xxx作为命名空间
还是用刚刚的例子，假设有以下两个 SCSS 文件：
文件：_variables.scss

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

文件：styles.scss

// styles.scss
@use 'variables.scss' as customVars;
body {
  background-color: customVars.$primary-color;
}

button {
  background-color: customVars.$secondary-color;
}

在这个示例中，styles.scss 使用 @use 导入了 _variables.scss 文件，并使用 as customVars 为导入的模块创建了一个命名空间 customVars。然后，我们使用 + 后面加上 customVars 来指定变量名作为命名空间的标识。

在 styles.scss 中，我们可以通过 customVars.$primary-color 和 customVars.$secondary-color 来访问 _variables.scss 中定义的变量。这样的用法可以避免变量冲突，并提供更清晰的命名空间标识，增加代码的可读性。

但是有一种特殊情况，就是通过 as  * 来导入
如果在 @use 后面使用 as *，表示将导入的模块的所有内容直接合并到当前文件中，并且不会创建一个命名空间。这样可以让导入的模块的所有变量、mixin、函数等直接在当前文件中使用，而不需要使用命名空间来访问它们。
让我们继续使用上面的示例：
文件：_variables.scss

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

文件：styles.scss

// styles.scss
@use 'variables.scss' as *;

body {
  background-color: $primary-color;
}

button {
  background-color: $secondary-color;
}

在这个示例中，styles.scss 使用 @use 导入了 _variables.scss 文件，并使用 as * 表示导入模块的所有内容，而不为它们创建一个命名空间。

结尾
总结下来就是，推荐使用 @use来导入模块，以获得更好的模块化支持、性能优化和避免全局污染问题。而 @import 在新版本 Sass 中已不再推荐使用，并且未来可能会被废弃。