css - Angular 在全局 style.css 文件中使用 CSS 变量

Question

如何在全局 CSS 文件中使用 CSS 变量

只需检查 stackblitz 中的 style.css 文件

https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css

Answer 1

在全局 css 文件 style.css 中，我有以下代码:

import ...

:root {
    --main-color: #3f51b5;
}

它声明了一个 css 变量，“main-color”

然后在子组件css文件中，我可以直接使用变量

#component-body {
  background: var(--main-color);
}