20

Here is the screenshot of my website structure. Screenshot of project 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.

Arindam Dawn
  • 1,769
  • 2
  • 18
  • 35
  • Sass doesn't throw this error for no reason, and it's not because the mixin is "in a separate folder". – cimmanon Apr 12 '15 at 16:25
  • 1
    possible duplicate of [Why do I get "Undefined mixin 'border-radius'" in Compass?](http://stackoverflow.com/questions/15422098/why-do-i-get-undefined-mixin-border-radius-in-compass) – cimmanon Apr 12 '15 at 16:29
  • 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. – Tushar saxena Jul 31 '21 at 10:44

6 Answers6

11

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

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

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
Brian McCall
  • 1,831
  • 1
  • 18
  • 33
6

Ad as * end of line

Example:

@use  './mix' as *;
Waseem Wisa
  • 61
  • 1
  • 2
  • 3
    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](/help/how-to-answer). – Community Aug 26 '22 at 06:32
  • This was it for me – jsaddwater Jan 24 '23 at 15:29
5

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.

Jet Jacobs
  • 51
  • 1
  • 3
0

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 *;`
Ramez
  • 1
  • 1
0

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.

Victor Eke
  • 109
  • 6
0

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";

Abilash
  • 1
  • 1