How to read css variable in angular?

Why I can't get the css variable content in angular?

I add variable in style.css as following:

:root {
  --foo: "string";
}

and try to get the value by getPropertyValue in app.component:

 ngOnInit() {
    const y = document.body.parentElement.style.getPropertyValue('--foo');
    console.log({ y }); // logs: "".
  }

codesandbox.io

I using Chrome last version.