SCSS 模块化 @use

@use

由 @use 加载的样式表被称为模块（modules）。Sass 一些内置模块，其中有很多实用的函数。

通过 @use 加载的模块不管被引用了多少次，都只会在编译后输出一次到 css 中。但是使用 @import 多次引入同一模块，会反复输出到 css 中。

// module.scss

.module {
  color: #f00;
}

// a.scss

@use './module.scss'

// b.scss

@use './module.scss'

// index.scss

@use './a.scss';
@use './b.scss';

编译后的 css ：

.module {
  color: #f00;
}

@use 与 @import的区别

@use 和 @import的区别在于：

不管使用了多少次样式表，@use 都只会引入和执行一次。与全局使用相反，@use 是有命名空间的，而且只在当前样式表中生效。以 -或者 _开头的命名空间被认为是私有的，不会被引入其他样式表。