使用兄弟文件中的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  

我知道这很基本，但是我不明白这里发生了什么。