如何在一个scss文件中使用$ variables到另一个

Question

我正在使用Angular 4应用程序。下面是我的代码。

variables.scss

$primary: blue;
$secondary: red;

定义$ variables。

styles.scss

@import './assets/variables';

在styles.scss中导入variables.scss文件

角cli.json

"styles": [
        "styles.scss"
      ]

在angular-cli.json中导入styles.scss文件，以便styles.scss文件中的任何导入都可以使用我的整个项目。

header.html中

<h1 class="primary-color">Header</h1>

header.html文件中定义的主要颜色类

header.scss

.primary-color{
    color: $primary;
}

尝试在header.scss文件中使用$ primary变量。但是编译器会抛出错误消息

  

未定义的变量：“$ primary”。

我尝试在header.scss文件中导入variables.scss文件，现在它工作正常，因为它以蓝色显示文本“Header”。现在我的header.scss文件如下所示。

header.scss

@import "~assets/variables.scss";
.primary-color{
    color: $primary;
}

现在我的问题是为什么我们应该在header.scss文件中再次导入，尽管我们已经在styles.scss文件中导入了？我不喜欢在每个scss页面中导入，因为我要在这么多的scss文件中使用这些$变量。有什么想法/替代想法吗？