SCSS 和 @layers - 如何让它们一起工作？

Question

在我的styles.scss文件中，我很少导入通用类和函数：

@import "css/generic.scss";
@import "css/functions.scss";
@import "css/layout.scss";

我正在尝试使这些导入分层工作。我尝试过以下方法：

@import "css/generic.scss" layer(utilities);

@layer utilitites {
  @import "css/generic.scss";
}

或者将所有 CSS 代码包装在导入中。

每次我都会遇到同样的错误 - 函数文件中的某些内容稍后无法使用。functions.scss通常它是定义在其中的mixin，layout.scss但它不可用。

有办法让它发挥作用吗？我猜这是因为 SCSS 组件（例如 mixins）具有某种范围？

Answer 1

我的解决方案是从 generic.scss 编译 generic.css 文件，然后创建一个 style.css 并像这样使用它@import "css/generic.css" layer(utilities);