SCSS Variable not applying globally

Question

I have a variable and gallery partial: _variables.scss, _gallery.scss

When I import the variables file, which contains only one line $primary: #e0291a;, it works in the main style.scss file, but not in the _gallery.scss file.

My project is only going to grow, but do I really need to import the variables file in every single subsequent partial file?

I'm using VSCode Live Sass Compiler. The variables work with a custom webpack/laravel mix script I've set up a few years back, but not with this extension.

Is there a way to streamline the variable import without adding the line in every single scss file?

style.scss (main file):

@use 'variables';
@use 'gallery';

_variables.scss:

$primary: #ffffff;

_gallery.scss:

#gallery {
    background-color: $primary // <--- Throws error of undefined variable
}

Answer 1

Make sure when using Nuxt 2 you are using the Nuxt Style Resources V1 - lots of instructions out there don't say that