CSS 变量在与 ::-webkit-scrollbar 一起使用时未定义

Question

请查看这个codepen示例

body {
  width: 110000px;
  height: 110000px;
  background-color: black;
}

:root {
   --scrollBarWidth: 5px;
  --scrollBarHeight: 5px;
  --scrollBarWidthWide: 8px;
  --scrollBarHeightWide: 8px;
  --scrollBarThumbColor: red;
  --scrollBarTrackColor: blue;
  --scrollBarBorderRadius: 5px;
  --scrollBarThumbColorHover: red;
  --scrollBarWidthFirefox: thin;
}

  body::-webkit-scrollbar {
    height: var(--scrollbarWidth);
    width: var(--scrollbarWidth);
  }

如果你检查它，你会看到 css 变量显示为“未定义”，但样式工作正常。

上下文： 我正在使用 create-react-app 创建一个 web 应用程序，并使用 ::-webkit-scrollbar 和 css 变量设置滚动条的样式，就像上面的代码笔一样。 css 变量显示为“未定义”，但样式已正确应用（这适用于本地主机开发模式） 但是当我构建和部署它时，它们不再起作用。

我希望它们不会显示为未定义，并且在我构建和部署时可以工作。