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

Question

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

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

Answer 1

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

import ...

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

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

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

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

Answer 2

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

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

干得好：

应用程序/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);
}