SCSS import does not import variables in Svelte/Vite

I'm having a lot of trouble with importing SCSS variables into my Svelte components. My main project has a slightly weird structure, so I tried with an empty project, and the scss imports will import classes, but they won't import the scss variables.

Exact steps to reproduce are as follows:

1. npm create vite@latest

2. cd [new-project-directory]

3. npm install

4. npm i -D sass sass-embedded

5. Make file /shared/app.scss

Then, I put the following in the files:

// [directory]/shared/app.scss$color: #ABCABC;.test {background-color: #5C5C5C;}

// [directory]/src/App.svelte// ... basic template<style lang="scss">  @use "../shared/app";  .header-color {    //color: $color;  }</style>

This does not work, but I don't understand why it doesn't work. The @use "../shared/app" does import classes, and I can use the .test class and it works. But when I try to use $color in App.svelte's style tag, it throws an "undefined variable" error.

Anyone got any inputs cause I'm at a loss..