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

Question

我已经在 src/styles/settings/_variables.scss 中定义了 SCSS 变量，并且我将它们导入 src/styles.scss ，但这些变量仍然不适用于每个组件。

有没有办法制作一个全局文件来保存我其余组件的所有 SCSS 变量？因为在每个单独的组件 .scss 文件中写入 @import 非常令人沮丧，特别是如果我有许多嵌套组件。

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

我将 Angular 7.3 与 CLI 一起使用。

原文由 Vladimir Humeniuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只需要添加更多配置，因此在声明全局变量的地方，您需要将其包装在 :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 ，因为这可以用来忽略它们。

原文由 Dince12 发布，翻译遵循 CC BY-SA 4.0 许可协议