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.

Raiment

Sass doesn't throw this error for no reason, and it's not because the mixin is "in a separate folder". – Deportee

possible duplicate of Why do I get "Undefined mixin 'border-radius'" in Compass? – Deportee

Please note: Always declare mixins before using them to avoid the ' undefined mixins ' error. So make sure to use include after the mixin is declared not before that. – Julijulia

Answer 1

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

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

Marlanamarlane

when I am including the mixin in the same file it works well .. but when the mixin is in a seperate _mixin.scss file in seperate modules folder, it doesn't work even after using the "@include" statement. Why so? – Raiment

$project-path: absolute-path(".."); see if setting the project path so the compass works properly – Marlanamarlane

the link says page not found – Vookles

also, worth noticing, you have to declare the mixin before calling it (that worked for me, coming from Google, hehe) – Eastward

Answer 2

Ad as * end of line

Example:

@use  './mix' as *;

Pily

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Playoff

This was it for me – Nalepka

Could you please add further clarification to your answer? – Halfsole

This is the only correct answer – Graceless

Answer 3

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.

Electrotherapeutics

the same for me, thanks – Lunneta

Answer 4

as Waseem Wisa said you add @use 'mix' as *; or you can edit your file like this: '''

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

}

'''

or add index.scss file to your scss folder then forward all module files in it like : _index.scss (this is file name)

`forward 'mix';`

after that add this file to your main.scss

`@use 'index' as *;`

Impale

Answer 5

To elaborate on Brian's answer make sure you import the _mixins.scss file in the main sass file.

On the top simply do this.

// style.scss
@import "mixins";

This will fix the undefined error.

Ramulose

Answer 6

First import the mixin sass file in your style.scss file. Be sure to import the file first before importing the globals and variables file. For example like this, @import "_variables"; @import "_mixins"; @import "_globals"; @import "_header";

Valentinvalentina

Answer 7

This error appeared to me because I positioned the mixins at the end of scss file, moving them to the top, before the include, solved the problem.

Snorkel