Importing SASS variables with @use

I have been using LESS for years and am only just trying out SASS. I am having trouble with a very basic thing so I hope someone can help me out.

What I want to achieve is:

a file theme.scss (which is compiled into theme.css) contains separate components (for header, navigation, font etc.)
define variables for things like brand colours to be re-used in the components

I have got it to work with @import, but because that is (going to be) deprecated I want to use @use instead. According to https://sass-lang.com/documentation/at-rules/use that should be possible.

My file setup is like this:

|- style
   |- _definitions.scss
   |- theme.scss
   |- components
      |- component.scss

Then I have this in the files:

// theme.scss
@use 'definitions';
@use 'components/component.scss';

// _definitions.scss
$base-color: blue;

// components/component.scss
body {
    background: $base-color;
}

But this doesn't work: my compiler (I'm using Prepros) just says it can't find the variable $base-color. :( Note: if I replace @use by @import it works just fine.

Help?

Solution

@import will never be depricated. Sass' devs are a sleepy bunch of ****. @use is only supported by Dart-Sass yet, I assume you are using Node-Sass, which most are. Therefor you need to use @import, which makes in most use cases no difference.

You can find the info right under the heading, its the first line, virtually everbody skips.