css - 如何在 React 的 @import'ed 样式表中读取 CSS 变量集？

Question

给定以下文件结构

应用程序.css

@import https://foo.css

html {
  --green: #ff0;
}

https://foo.css/

html {
  --red: #f00;
}

我该如何阅读--red？

已经试过了

应用程序.tsx

...
useLayoutEffect(() => {

  // works
  const green = getComputedStyle(document.documentElement)
    .getPropertyValue('--green');

  // doesn't work
  const red = getComputedStyle(document.documentElement)
    .getPropertyValue('--red');
})

我已经尝试过等待帧setTimeout但requestAnimationFrame无济于事。如果我setTimeout(() => {...}, 10000)有变量，那么我知道这只是一个同步问题，但我不知道如何获取更新。