当将混合器放在单独的文件夹中时，Sass编译器会抛出“未定义的mixin”错误。

Question

这是我的网站结构截图。

在我的mixin文件中，我已经创建了所有必要的Sass Mixin。

我为边框半径创建了这个mixin:

 @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

现在当我在模块文件夹中的_button.scss中为我的按钮类使用它时，我会遇到未定义变量错误。然而，当我在_button.scss文件本身中使用相同的mixin时，我不会遇到任何错误。

在我的_button.scss文件中，我已将mixin包含如下：

button{
    background-color: $theme-color;
    border: 0px solid;
    padding: 0.7rem 3rem;
    @include border-radius(2rem);

}

问题是什么？我想将所有的Mixin放在一个单独的文件中，以保持结构的整洁。

- Arindam Dawn

---

Sass 不是无缘无故地抛出这个错误，也不是因为 mixin "在一个单独的文件夹中"。 - cimmanon

可能是为什么我在Compass中得到“未定义的mixin 'border-radius'”的重复问题。 - cimmanon

请注意：在使用混合器之前，始终要先声明它们，以避免出现“未定义的混合器”错误。因此，请确保在声明混合器后再使用include，而不是在此之前。 - Tushar saxena

Answer 1

您需要使用 @include 或 @import 来包含 mixin。

https://sass-lang.com/documentation/at-rules/mixin

- Brian McCall

---

当我在同一个文件中包含mixin时，它可以正常工作... 但是当mixin位于单独的_modules文件夹中的_separate_mixin.scss文件中时，即使使用"@include"语句也无法工作。为什么会这样？ - Arindam Dawn

$project-path: absolute-path(".."); 看看是否设置了项目路径，以便罗盘正常工作。 - Brian McCall

链接显示页面未找到。 - Abdul Mahamaliyev

此外，值得注意的是，在调用 mixin 之前必须先声明它（这对我来说很有效，来自 Google，呵呵）。 - Francisco A. Cerda

Answer 2

作为行尾的Ad as * 示例：

@use  './mix' as *;

- Waseem Wisa

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

这对我来说就是这样了。 - jsaddwater

Answer 3

我回答这个问题，是因为我遇到了类似的错误，但原因不同。

对我来说解决方法是调整我的导入顺序。结果发现我引用了一个尚未导入的mixin。请确认在使用mixin之前已经导入。

- Jet Jacobs

---

一样的，谢谢。 - Marek

Answer 4

正如 Waseem Wisa 所说，您可以添加 @use 'mix' as *; 或者您可以像这样编辑您的文件：

@use 'mix';
button{
    background-color: $theme-color;
    border: 0px solid;
    padding: 0.7rem 3rem;
    @include mix.border-radius(2rem);

}

'''

或者将index.scss文件添加到您的scss文件夹中，然后像这样将所有模块文件转发到其中：

_index.scss（这是文件名）

`forward 'mix';`

然后将此文件添加到您的main.scss中

`@use 'index' as *;`

- Ramez

Answer 5

为了详细说明Brian的答案，请确保在主Sass文件中导入_mixins.scss文件。

在顶部简单地执行此操作。

// style.scss
@import "mixins";

这将修复未定义的错误。

- Victor Eke

Answer 6

首先在你的style.scss文件中导入mixin sass文件。确保在导入全局和变量文件之前先导入该文件。 例如像这样： @import "_variables"; @import "_mixins"; @import "_globals"; @import "_header";

- Abilash