Global sass variables not working (undefined) - Live sass compiler

Question

I'm using VSCode extension - Live Sass Compiler (Glenn Marks version). Everything works well besides global variables which return undefined when I include them in App component. This is my project structure:

_variables.scss

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

$font_logo: "Great Vibes", cursive;
$max_width: 750px;

_defaults.scss

* {
  box-sizing: border-box;
}

body {
  margin:0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing-: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

and index.scss which I import in App.js.

@import './variables';
@import './defaults';

App.js import

import "./styles/index.scss";

What is working?

Global styling like tags, classes etc. working well so they are loaded correctly

What is not working?

Defined variables in _variables.scss not working and give undefined error.

What I tried?

I installed Glenn Marks version because Ritwick Dey's is not supported anymore. I tried to change @import to @use and @use 'path' as. I tried changing order of imported files. I was looking for answer in several topics but didn't find an answer.

When I import @import './variables'; to a specific scss file it works but I want to include this file only once in index.scss. I don't want to write it in every scss file when I need variables.

Thanks for any help!