我已经在 src/styles/settings/_variables.scss
中定义了 SCSS 变量,并且我将它们导入 src/styles.scss
,但这些变量仍然不适用于每个组件。
有没有办法制作一个全局文件来保存我其余组件的所有 SCSS 变量?因为在每个单独的组件 .scss
文件中写入 @import
非常令人沮丧,特别是如果我有许多嵌套组件。
我知道,有很多类似的问题,但似乎它们都已经过时并且与 Angular 的最新版本无关。
我将 Angular 7.3 与 CLI 一起使用。
原文由 Vladimir Humeniuk 发布,翻译遵循 CC BY-SA 4.0 许可协议
您只需要添加更多配置,因此在声明全局变量的地方,您需要将其包装在
:root{}
中。所以在src/styles/settings/_variables.scss
。然后,当您在 SCSS 中使用它们时,您将需要像这样访问它们。
要添加关于注释的内容,此方法可以使用
mixins
、@media
和keyframes
并且不仅限于颜色/字体。那是一个例子。据我了解,您需要一个全局文件
src/assets/style/global
然后将每个 scss 文件导入到您定义它们的位置。如果您不想在组件中使用全局变量,请查看何时让全局变量工作。查看 ViewEncapsulation ,因为这可以用来忽略它们。