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

新手上路,请多包涵

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

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

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

我将 Angular 7.3 与 CLI 一起使用。

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

阅读 1.3k
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@mediakeyframes 并且不仅限于颜色/字体。那是一个例子。

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

 @import 'filename';

如果您不想在组件中使用全局变量,请查看何时让全局变量工作。查看 ViewEncapsulation ,因为这可以用来忽略它们。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题