国家设计师资格证书关于华大18年专注seo服务网站制作应用开发

背景：将一个公共的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推荐的导入方式