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

Question

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

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

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

标签： cssangularcss-variables

Answer 1

在全局css文件styles.css中，我有这个代码：

import ...

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

它声明了一个 CSS 变量“主颜色”

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

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