@import 和 @use SCSS 规则有什么区别？

Question

何时使用 SCSS 规则：@use何时使用@import？它们与使用它们的最佳情况有什么区别？

@use '_styles.scss'; 
@import '_styles.scss';

Answer 1

新@use的类似于@import. 但有一些显着差异：

• 该文件仅导入一次，无论您@use在项目中导入多少次。
• 以下划线 (_) 或连字符 (-) 开头的变量、mixin 和函数（Sass 称之为“成员”）被认为是私有的，而不是导入的。
• 来自使用过的文件（在本例中为 button.scss）的成员仅在本地可用，但不会传递给未来的导入。
• 同样，@extends只会向上链应用；扩展导入文件中的选择器，但不扩展导入此文件的文件。
• 默认情况下，所有导入的成员都是命名空间的。

https://css-tricks.com/introducing-sass-modules/

@import将被弃用，而支持@use和@forward，最迟将在2022 年 10 月取消支持。