Import external sass or scss variables with Svelte and Vite

Question

I've created a big sass stylesheet with all sorts of colors. Following vite's guide for sass, I got sass working in my components. Now I'd like to use these external variables in my Svelte components' stylesheets as well.

So far I've tried:

@use "./test.sass" // along with "./test"
p {
  color: $testColor
}

As well as

@import url("./test.sass") // along with "./test"
// ... same as above

It gives me an error Error: Undefined variable. And my variable is defined properly in test.sass

Answer 1

@use wraps imported variables in a namespace, so instead of $testColor you have to explicitly state that these variables come from a module.

@use "./test.sass"
p {
  color: test.$testColor
}

or

@use "./test.sass" as *
p {
 color: $testColor
}