Angular：css變量在組件中不可用

Question

嗨，我正在嘗試使用 css 變量來預定義顏色。

這是我的 app.component.css

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

問題是當我在其他組件中使用這個變量時它不會工作。 例如

.some-class{
  background-color: var(--main-bg1);
}

我怎樣才能使這項工作有角度？

Answer 1

移動這個：

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

到styles.css然后它會工作

演示

Answer 2

將這些樣式放入styles.css ：

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

Answer 3

在your.component.scss文件中將變量添加到:host范圍。

_{你的.component.html}

:host {
  --drawer-width: 300px;
  --drawer-height: 65px;
  --drawer-top-height: 65px;
  --drawer-top: #ffffff;
  --drawer-left: red;
  --drawer-right: #f5f5f7;
  --drawer-top-bottom: red;

  /* Usage sample of variable */
  .use-sample-in-div {
    background: var(--drawer-left);
  }
}

您還可以使用主要的styles.scss更改值。 首先，將類名添加到您的組件中作為首要任務。

_{app.component.html}

<Drawer class="drawer-class"></Drawer>

_樣式.scss

:root .drawer-class {
  --drawer-width: 150px;
  --drawer-height: 32px;
  --drawer-top-height: 32px;
  --drawer-top: blue;
  --drawer-left: green;
  --drawer-right: purple;
  --drawer-top-bottom: pink;
}