Webpack - Importing mixins/variables/functions in external Files

Question

I already know that you can import files in the same folder for example if I was to have the below:

@import "mixins"

.hero { 
    @include hero
}

This would work as expected, but what I am trying to do is the below:

index.ts:

import "../global.scss"
import "../hero.scss"

global.scss looks like this:

@import "mixins";
@import "functions";

So I'm using global to import all my global styling I was hoping to include my Mixins, Variables and Functions in this as well so the rest of my scss could use this.

However the problem with this is that the heros scss file does not recognise the global file and says that the mixin hero doesn't exist.

How have others resolved this issue? I don't really want to import the mixins to every file that needs them.

Let me know your thoughts

Answer 1

To use SCSS mixins, you have to import them using SCSS. By the time you import them in your .ts file, your SCSS has already run through the SCSS compiler and been converted to CSS, so the hero file has no connection to the global file as far as SCSS is concerned.

You will need to use @import "mixins" like in your first example.