Although I am aware that files can be imported from the same folder, I am facing a specific challenge. For example, if I have the following code:
@import "mixins"
.hero {
@include hero
}
It works as expected. However, what I am attempting to do is this:
index.ts:
import "../global.scss"
import "../hero.scss"
The global.scss file looks like this:
@import "mixins";
@import "functions";
I want to use the global file to import all my global styles, including mixins, variables, and functions for the rest of my SCSS files to utilize.
Unfortunately, the issue arises when the hero.scss file does not recognize the global file and indicates that the mixin 'hero' does not exist.
Has anyone else faced and resolved this issue before? I prefer not to import mixins into every file that requires them.
Your insights are appreciated.