=))
Ну давай попробую еще раз.
Самая вредная переменная в желтой рамке. Ее надо убить первой.
Вы ее уже "убили".
Вы задали значение "none".
У вас получилось после обработки браузером
background-color: none !important
Кстати, для background-color это не валидное значение. Оно может принимать только цвет.
Но хрен с ним – невалидное значение будет проигнорировано. А значит цвет станет по умолчанию назначенным браузером. Како1 цвет у окна, когда не заданы вообще никакие стили? Правильно- белый.
Теперь идем к сути проблемы. А именно смотрим на это:
Здесь примененные стили отображаются каскадно снизу вверх. Наиболее приоритетные вверху.
Я специально вырезал скриншот без объявления переменной чуть выше. Не имеет отношения.
Сначала браузер применяет стиль background-color: #DC143C; который прописан в index.html
А потом применяет стиль background-color: var(--bs-body-bg);, который находится в bootstrap.scss
Cами вы не догадываетесь почему. А все просто. Стили объявленные или подключенные ниже имеют больший приоритет.
Обязательно почитайте что такое CSS-каскад. Оно, кстати, так и расшифровывается Cascade style sheets - каскадные таблицы стилей.
На этом моменте, я надеюсь вы уже догадываетесь, что вам следует перенести style в index.html ниже подключения bootstrap.css
Либо добавить там (в index.html) !important для стиля фона.
Или самое простое и правильное - поменять значение переменной, а не пытаться ее "убить" =))
Основная просьба: не трогать
А почему? Цвет страницы задается скриптами и может меняться? Ну тогда этот цвет можно просто указывать в теге body и опять не заморачиваться с переопределениями и "убийствами" =)
<body style="--bs-body-bg: red">