如何使用@use和@forward正确搭建Sass 7-1模式？

是的，使用Sass新模块系统（@use/@forward）时，每个需要依赖抽象层变量的组件文件，都得单独通过@use引入抽象层——这不是7-1模式的要求，而是@use的设计特性。

为什么之前@import能正常运行？ #

@import是将代码全局注入，所有导入的内容会合并到同一个全局作用域里。主文件导入抽象层后，所有后续被导入的组件文件都能直接访问这些变量。但@use是模块化导入，每个文件的@use只会把依赖引入当前文件的局部作用域，主文件的@use不会把变量传递给组件文件——组件作为独立模块，和主文件的作用域是完全隔离的，自然识别不到主文件里的变量。

怎么优化减少重复操作？ #

虽然必须在组件文件里@use抽象层，但可以通过一些方式简化：

• 在组件文件里使用@use '../abstracts' as *;，这样不用给变量加命名空间前缀，直接用$main-color即可
• 如果项目支持Sass配置，可以给抽象层路径设置别名（比如把./scss/abstracts设为@abstracts），这样组件里可以写@use '@abstracts' as *;，路径更简洁
• 注意：@forward只是转导出模块内容，不会引入模块的作用域，所以components/_index.scss的@forward并不能让组件文件获得抽象层的变量，组件还是得自己@use。

举个实际的_card.scss写法：

@use '../abstracts' as *;

.card {
  background-color: $main-color;
  padding: 1rem;
  border-radius: 4px;
}

这种模块化的方式看似比@import繁琐，但能让变量作用域更清晰，避免大型项目里的变量冲突，代码的可维护性反而更高——这也是Sass推出新模块系统的核心原因。

内容的提问来源于stack exchange，提问作者sass_rookie