Sass更新：@import——＞@use

背景：将一个公共的CSS样式文件导入到任意一个组件中进行使用

一、创建并使用CSS公共样式文件

1、在目录的assets目录下创建一个style文件夹，里面存放一个.scss文件（例：mixin.scss）

2、文件内以@mixin来设置名为flex的一组样式（在调用时需要用到这个名字）

复制代码

@mixin flex {
    display:flex;
    align-items: center;
    justify-content: center;
}

3 、在组件内导入公共文件（例：mixin.scss），并使用@include 样式名来引入想要的公共文件中的样式

复制代码

@include flex

二、导入公共样式文件时遇到的问题及解决方案

1、最开始：使用@import '文件路径'

复制代码

@import '@/assets/styles/mixin'

div{
   @include flex;
}

2、问题：

使用@import导入文件会报警告，原因是因为 Sass 的 @import 规则已被弃用，将在 Dart Sass 3.0.0 版本中移除。即使导入的样式生效（可能是使用的Sass版本没有那么高），但也存在很大的隐患，所以这种方式不建议使用。

3、解决：使用@use来替代@import（请注意，目前只有 Dart Sass 支持 @use。其他实现的使用者必须使用 @import规则。）

具体怎么使用@use,也容易出现问题：

（1）在使用@import的基础上直接进行更改：

复制代码

一开始：@import '文件路径'
更改：@use '文件路径'

@use '@/assets/styles/mixin'

div {
  @include flex;
}

（2）出现的报错是：

（3）原因：

在 Dart Sass 中，@use 语句用于导入其他 Sass 文件，并将其内容封装在一个命名空间中。

如果你只写 @use '@/assets/styles/mixin';，Dart Sass 会默认将文件内容封装在一个命名空间中，但这个命名空间的名称是文件路径的最后一部分。

例如，如果你的文件路径是 @/assets/styles/mixin.scss，那么默认的命名空间名称就是 mixin。

所以在使用时应该是：mixin.flex

复制代码

@use '@/assets/styles/mixin'

div {
  @include mixin.flex;
}

4、@use的其他写法：

（1）取消别名（慎用）

写法：

复制代码

@use '@/assets/styles/mixin.scss' as *;

div {
  @include flex;
}

可通过@use "路径" as * 来取消命名空间，这种方式加载的模块被提升为全局模块，所以在调用时不需要用命名空间名.样式类名，直接用样式类名就可以。

（2）自定义别名

复制代码

@use '@/assets/styles/mixin.scss' as 自定义名字;

div {
  @include 自定义名字.flex;
}

三、@use与@import对比

|--------|-----------|----------------|
| | @import | @use |
| 重复加载 | 可能导致重复加载 | 保证每个模块只加载一次 |
| 命名空间 | 无 | 可以自定义命名空间 |
| 作用域 | 共享一个作用域 | 创建命名空间，有隔离性 |
| 性能 | 可能存在性能问题 | 更优化性能 |
| 避免全局污染 | 不提供隔离性 | 提供隔离性 |
| 模块化支持 | 较弱 | 有更好的模块化支持 |
| 推荐版本 | 较旧版本的导入方式 | 新版本Sass推荐的导入方式 |