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

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.

3

6 Answers

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

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

4

Ad as * end of line

Example:

@use './mix' as *; 
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.

1

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.

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

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 *;` 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoaXJtaWZ%2BeoKOrJisq12YvK68yKWcq2Wknb%2Bww9JmrKeclZu2r7HDZqSisJmjeqa%2B0aipZq%2BYmrtuucixoKerXZa%2FpnnKnqetZZmjerSxz56pmqyVYrOw