Angular组件的全局scss变量，而无需每次都导入

我已经定义了SCSS变量，src/styles/settings/_variables.scss并将它们导入src/styles.scss，但是仍然不是每个组件都可以使用这些变量。

有什么办法可以创建一个包含其余组件所有SCSS变量的全局文件？因为@import在每个单个组件.scss文件中编写文件都非常令人沮丧，尤其是当我有许多嵌套组件时。

我知道，有很多类似的问题，但似乎它们都已过时，并且与Angular的最新版本无关。

我将Angular 7.3与CLI一起使用。

您只需要添加一些配置，因此在声明全局变量的地方，需要将其包装在中:root{}。所以在src/styles/settings/_variables.scss。

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

然后，当您在SCSS中使用它们时，您将需要像这样访问它们。

.example-class {
  background-color: var(--blue)
}

要补充说明，此方法可以使用mixins，@media并且keyframes不仅限于颜色/字体。那是一个例子。

根据我的理解，您需要一个全局文件src/assets/style/global，然后将每个scss文件导入到您在其中定义它们的位置。

@import 'filename';

如果您不希望在组件内使用全局变量，请在工作全局变量时查看。查看ViewEncapsulation，因为它可以用来忽略它们。

这就是我当前正在使用全局变量的项目的方式，它似乎运行良好。这将消除在您正在使用的每个scss文件中导入变量的需要。如果有任何麻烦，请评论BR。