CSS变量和角5

Question

我试图在我的角度应用程序中使用css varible，在一个子组件中，它只是不起作用。在浏览器的元素工具(我使用的是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一起工作吗？谢谢

Answer 1

您的根选择器也可能获得带有角分量id的属性。

尝尝这个

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

Answer 2

我知道这是旧的，但一个比：：ng-深度更好的解决方案是使用:host。这将避免以后出现下列问题时:ng深度被否决。

:host {
  --width: 43.75%;
}

Answer 3

CSS变量不依赖于角度，而是依赖于浏览器。你需要一个最新的浏览器来使用它们。CanIUse可以帮你解决这个问题。

由于您使用的是角，您可以使用.scss文件或.less文件，用于沙斯和较少。它们都处理变量，还有更多的变量。

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

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