Использование переменных SASS из братского файла

Question

У меня проблема при попытке выполнить простейшие действия с sass.

У меня просто следующая структура файлов:

Папка стилей:

 └───src
    ├───styles
    │    └───_variables.scss // here I have only a variable
    |    └─── sharedStyles.scss // here are all my vars
    |
    ├─ App.tsx // Where I usee the style

_variables.scss имеет только следующее:

$my-Blue: #04284D;

А вот мой sharedStyles.scss

@import "variables.scss";

.App {
  text-align: center;
}

.App-header {
  background-color: $my-blue;
  height: 150px;
  padding: 20px;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

Когда я компилирую его, я всегда получаю ту же ошибку:

"message": "Undefined variable: \"$my-blue\".",
  "formatted": "Error: Undefined variable: \"$my-blue\".\n        on line 8 of src/styles/sharedStyles.scss\n>>   background-color: $my-blue;\n\n  

Я знаю, это довольно просто, но я не мог понять, что здесь происходит.