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

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

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#including_a_mixin

Answer 2

Only answering because I got the same error for a different reason.

The solution for me was to reorder my imports. As it turns out I was referencing a mixin that wasn't imported yet. Check to be sure you aren't using a mixin prior to it's being imported.

Answer 3

Ad as * end of line

Example:

@use  './mix' as *;