Переменные CSS не определены при использовании с ::-Webkit-Scrollbar ⇐ CSS

[Anonymous]

Пожалуйста, ознакомьтесь с этим примером CodePen < /p>
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(--scrollBarHeight);
width: var(--scrollBarWidth);
}
< /code>
, если вы это проверьте, вы увидите, что переменные CSS показаны как «не определено», но стиль работает нормально. < /p>
Контекст:
Я использую Create-react-App, чтобы создать вар. Переменные CSS показаны как «неопределенные», но стиль правильно применяется (это для режима разработки Localhost)
, но когда я строю и развертываю его, они больше не работают.>

Подробнее здесь: https://stackoverflow.com/questions/756 ... -scrollbar