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

Question

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

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

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

Answer 1

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

import ...

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

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

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

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

Answer 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);
}

Answer 3

请参见，如果使用的是CSS变量，则必须在某些CSS文件或:root{}块的同一文件中定义它。

:root{
  --background: grey;
}

body {
  background: var(--background, red); 
  /* "red" is the fallback if --background is not defined anywhere.*/
}

或类似的东西

  

theme.css

:root{
   /* define all the variable here */
}

  

style.css

@import url('theme.css');

body{
    background: var(--background, red);
}