Sass compiler throws 'undefined mixin' error when mixins are kept in seperate folder

Question

Here is the screenshot of my website structure.

In my mixins file, I have created all the necessary sass mixins.

I have created this mixin for border radius:

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

Now when I try to use this for my button class in _button.scss in modules folder , I get undefined variable error. Whereas when I use the same mixin in the _button.scss file itself, I don't get any error.

in my _button.scss file i have included the mixin as under

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

}

What is the issue exactly. I want to keep all my mixins in a seperate file to keep the structure neat.

Answer 1

you have to include the mixin with @include or @import

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