Sass @use 无法将分离的 mixin 文件处理到主 mixin 文件中（错误：未定义的 Mixin）

Question

我对 sass 有点陌生，但是当我学习它时，Sass 网站说要开始使用 @use 而不是 import，所以经过大量的尝试和错误我终于想通了如何使用它与 import 几乎相同。

注意：我正在使用 Prepros 进行编译。

我在 mixins 文件夹中有自己的文件：

// scss/mixins/_flex.scss

@mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-flow: $flex-flow;
}

我试过 @use 在我的主 _mixins.scss 文件中使用它：

// scss/_mixins.scss

@use "mixins/flex" as *;

然后我尝试在我的另一个包含共同元素的文件中使用它：

// scss/_common_elements.scss

@use "mixins" as *;

.flex {
  @include flex();
}

然后我在 Prepros 日志中收到错误：Undefined Mixin 我调用 @include flex(); 行（在 _common_elements.scss 内部）

它一直有效，直到我决定将 mixins 放在它们自己的单独文件夹中，但这与它在 Bootstraps 源代码中的设置方式相同。

整个使用 @use 的过程真的很混乱。

有谁知道我为什么会收到此错误？

Answer 1

我设法修复了它！

另外：如果你能帮我编辑这个问题/答案以便用适当的语言更好地解释它，请 post 建议，我会更新它。

在 _mixins.scss 文件中我需要使用 @forward "mixins/flex" 而不是 @use "mixins/flex" as *;:

像这样：

// scss/_mixins.scss 

@forward "mixins/flex";
@forward "mixins/overlay";
@forward "mixins/etc...";

我希望他们能在实际 sass @use documentation.

上更清楚地说明这一点

这是actual docs to @forward.

Answer 2

要使用 @use 命令和 sass 的其他新功能，您需要安装 dart sass，而不是 node-sass;

https://www.npmjs.com/package/sass

Sass @use 无法将分离的 mixin 文件处理到主 mixin 文件中（错误：未定义的 Mixin）

Sass @use not working with separated mixin files into master mixin file (ERR: Undefined Mixin)

sass

scss-mixins

prepros