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

[Anonymous]

Пожалуйста, ознакомьтесь с этим примером кода

Код: Выделить всё

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);
}

Если вы проверите его, вы увидите, что переменные CSS отображаются как «не определенные», но стиль работает нормально.
Контекст :
Я использую create-react-app для создания веб-приложения и стилизации полосы прокрутки с использованием ::-webkit-scrollbar и переменных css, как в приведенном выше коде.
Переменные css показаны как «неопределено», но стиль применен правильно (это для режима разработки на локальном хосте)
Но когда я его собираю и развертываю, они больше не работают.
Я их ожидал чтобы он не отображался как неопределенный и работал при сборке и развертывании.

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