CSS 变量和 Angular 5答案

【问题标题】：CSS Variables and Angular 5CSS 变量和 Angular 5
【发布时间】：2018-07-01 23:31:39
【问题描述】：

我正在尝试在我的 Angular 应用程序中使用 css 变量，在子组件中，它只是不工作。在浏览器的 Elements 工具（我使用的是 Chrome 最新版本）中，var() 没有任何作用。示例：

css 文件：

:root {
  --width: 43.75%;
}

#content {
  display: grid;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: 90%;
  grid-gap: 3px;
  align-content: center;
  justify-content: center;
  border: 2px solid black;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

这就是它在浏览器中的显示方式：

CSS 变量是否可以与 Angulat 一起使用？谢谢

【问题讨论】：

它实际上可能是你的浏览器。
你有任何特殊的 postcss 或类似的插件可能会杀死这个吗？

标签： javascript css angular css-variables

【解决方案1】：

我知道这是旧的，但比 ::ng-deep 更好的解决方案是使用 :host 代替。这将避免以后在弃用 ::ng-deep 时出现问题。

:host {
  --width: 43.75%;
}

【讨论】：

【解决方案2】：

您的根选择器可能还会获得带有角度组件 ID 的属性。

试试这个

::ng-deep :root {
  --width: 43.75%;
}

【讨论】：

谢谢！现在可以了。可能是错误的根选择器
在封装你的选择器的样式之后会像这样:root[_ngcontent_c7] {...}。 ::ng-deep 删除了为下一个选择器封装的样式。
::ng-deep 已被弃用。 “不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对 /deep/、>>> 和 ::ng-deep 的所有 3 个）。直到那么 ::ng-deep 应该是首选，因为它与这些工具具有更广泛的兼容性。” Link

【解决方案3】：

CSS 变量不依赖于 Angular，它们依赖于您的浏览器。您需要有一个最新的浏览器才能使用它们。 CanIUse 可以帮助您。

由于您使用的是 Angular，因此您可以对 SASS 和 LESS 使用 .scss 文件或 .less 文件。它们都处理变量，等等。

如果您使用 CLI，只需重命名文件，然后在组件装饰器中重命名对这些文件的引用。

您也可以转到.angular-cli.json 并将styleExts 的值更改为您选择的值。

【讨论】：