I’m having an issue with my SCSS imports. I have a base scss file that I am importing all of my other partials into but I’m getting undefined variable errors as a result.
The imports in my main.scss file are organized as follows:
@import "variables"; @import "../core/mixins"; @import "../core/typography"; @import "../core/layout"; @import "../core/buttons"; @import "../core/navigation"; @import "../core/forms";
In my variables file I am setting global vars to be used throughout the project but when I try to access one of those variables inside my mixins file I get the dreaded “Undefined variable” error.
I feel like this should be achievable without importing the variabbles file into every file that needs to use them if they are all imported, in proper order, inside my main scss file.
What am I doing wrong?
The error message:
And the file tree:
As you can see the variables are imported before the mixins, and the mixins before the other stylesheets that would be using them, but I’m getting the message that no mixin I’m trying to use exists when it clearly does.
I’m also a little confused as to why it would work all of a sudden today and then just stop working again.
I’m using gulp to compile and my tasks are set up to compile the sass in the ‘assist’ folder which is (supposed to be) importing the core styles.