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.
36 Answers
you have to include the mixin with @include or @import
https://sass-lang.com/documentation/at-rules/mixin
4Ad as *
end of line
Example:
@use './mix' as *;
2Only 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.
1To 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