Why do SCSS variables imported from another file doesn't work in Vue 3?

I have installed sass loader in my vue 3 project, but the issue is that I want to import variables from another file, but doesn't work

my schema is:

src
  assets
     scss
        styles.scss
        _variables.scss

styles.scss

@import url('./_variables.scss');

body{
  font-family: 'Montserrat';
  background-color: $primary-black;
}

.sidebar{
   width: 250px;
   height: 100vh;
   max-height: 100vh;
   background-color: $primary-black;
}

_variables.scss

$primary-black: #222222;

App.vue

Some HTML

<script>
  import Sidebar from './components/Sidebar';

  export default {
   components: { Sidebar },
   setup() {

  },
}
</script>

<style lang="scss" scope>
   @import url('./assets/scss/styles.scss');
</style>

And the issue is that in the browser the $primary-black variable fails, it appears background-color: $primary-black literally, I mean doesn't take de "#222222" color instead, but if I change the variable, and put it inside the styles.scss file, it works, so I'm not sure what could be the problem