传统用法
@import
@import "aaa.scss"
@import "bbb.scss"
运行时
编译时出现的问题:
混淆,污染,无私有
推荐用法
@use
可以解决混淆,污染,无私有的问题
- 使用@use就相当于解决了混淆
@use "aaa.scss"
@use "bbb.scss"
- 使用命名空间解决了污染问题
使用@use会默认给每一个模块加上一个命名空间,命名空间的名字跟模块的文件名是一样的,可以通过以下方法修改默认的命名空间名
@use "aaa.scss" as "newName"
@use "bbb.scss"
.test{
color:newName.$color;
background:bbb.$color;
}
- 定义私有变量解决私有问题
aaa.scss文件
在aaa.scss设置私有变量,需要在开头使用下划线
@_noChange:red;