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

【问题标题】：Angular use CSS variable in global style.css fileAngular 在全局 style.css 文件中使用 CSS 变量
【发布时间】：2019-04-18 07:51:57
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

import ...

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

它声明了一个css变量，“主色”

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

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

【讨论】：

【解决方案2】：

在全局 style.css 文件中，在 :root 选择器中定义自定义属性。

CSS 中的全局变量将使我们能够定义主题变量，以便多个组件可以使用相同的变量。

给你：

app/style.css

:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

要定义 CSS 自定义属性，请在属性前加上两个“--”，例如 --text-color:#2d2d2d。

现在我们可以在其他 CSS 文件中引用该变量。要使用自定义属性，请使用 var 关键字传入对自定义属性的引用。

app/header/header.component.css

:host {
background-color: var(--primary-color);
color: var(--text-color);
}

【讨论】：