GlobalVueStyles

I don't really understand how to get this to work. I am trying to load a global sass variable file into my Vue style tags. If I am understanding right, this should Indicate a file to include in every component style. But when I set it up it seems to not do anything and when I run npm run dev I get an undefined variable error.

Here is my mix code:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/main.scss', 'public/css')
    .options({
		extractVueStyles: true,
        globalVueStyles: 'resources/sass/utils/_variables.scss',
    })
    .version()

after doing this I thought I should have access to my variables in my .vue files by doing this:

<template>
    <h1>Example Component hi test</h1>
</template>

<script>
export default {

}
</script>
    
<style lang="scss">
    h1 {
        font-size: 50px;
        color: $blue;
    }
</style>

I'm sure I'm missing something, but any help on this would be appreciated.