sass-loader can't resolve @use rule

Question

I'm working on a vuejs app and I'm trying to import my variables files using the @use rule within prependData in sass-loader, but it seems not working properly. Using @use import does not work and I receive erros about variables. But using @import everything goes fine. Am I doing something wrong or getting the wrong concept about @use rule?

Using @import in prependData works:

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      // prependData: `@use '~abstracts/variables'` //this does not work
      prependData: `@import '~abstracts/variables'` //this works
    }
  }
}

Using @use does not work:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
15 │     color: $chuck
   │            ^^^^^^
   ╵

My package.json:

"sass": "^1.26.3",
"sass-loader": "^8.0.2"

My component:

<style lang="sass">
    .title
        color: $chuck
</style>

My variables.sass file:

$chuck: #BADA55

TIA

Answer 1

I just figured out what I was missing.

Just add as *:

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      prependData: `@use '~abstracts/variables' as *`
    }
  }
}

I'm just getting used to this new way of using sass.