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

我该如何在Angular中使这个工作起来？

- Juraj Jakubov

---

Angular使用视图封装，这意味着组件中的样式仅适用于该特定组件。但是，如果您在全局styles.css（或.scss）中定义样式，则可以在全局范围内使用它们。个人而言，我会在项目根目录下创建variables.scss并在其中声明变量。然后，您可以在组件中使用@import“src/variables.scss”并使用那里定义的变量。您也可以禁用视图封装（如文档中所述），但我不建议在更大的项目中这样做，因为它可能会变得非常混乱。 - TotallyNewb

Answer 1

在your.component.scss文件中，将您的变量添加到:host范围内。

_{your.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>

_styles.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;
}

- Serkan KONAKCI

Answer 2

移动此内容：

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

将 styles.css 添加到代码中，然后它就能正常工作了。

演示

- robert

Answer 3

将这些样式放入 styles.css 中：

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

- Chrillewoodz