Question

我对sass有点陌生，但是当我学习sass时，它说开始使用@use而不是import，所以在经过反复试验之后，我终于弄清楚了如何使用它。与导入相同。

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

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

// 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

我设法解决了这个问题！

也：如果您可以帮助我编辑此问题/答案，以便用适当的语言更好地解释它，请发表建议，我将对其进行更新。

在_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无法将分离的混合文件转换成主混合文件（ERR：未定义的混合）

2 个答案: