Sass Неопределенная переменная, хотя я импортировал их первым

Question

Когда я пытаюсь использовать мои переменные, это дает мне неопределенный результат, когда я сначала импортировал переменные в моем индексе. S css. Может кто-нибудь, пожалуйста, помогите мне понять, как это исправить.

//Var file

$main-color: red;
$black: black;
$white: white;
$green: #7DBB4F;
$grey: #323232;
$lightGrey: #EDEDED;

// styles.scss
@use './Variables/_variables.scss';
@use './0_base/base';
@use './1_layout/layout_index';
@use './2_pages/pages_index';
@use './3_components/components_index';

//where I try to use it

.hoverInputContainer{
    position: absolute;
    display:flex;
    justify-content: center;
    top: 70px;
    z-index: 999;
    background: $lightGrey;
    width: 98%;
    // height: 70px;
    padding: 10px 15px;
    font-size: 28px;
    opacity: .9;
    input{
        flex: 2;
        margin-right: 10px;
        font-size: 18px;
        letter-spacing: 1.3px;
        border: 1px solid grey;
        padding: 5px 10px;
    }
}