Является ли $main-background-color вашей css переменной (как в пользовательском свойстве) или вы определили ее как переменную Sass?
Если это фактическая css переменная / пользовательское свойство, которое вам нужно использовать это выглядит так: var(--main-background-color) и как глобальная переменная должна быть определена в :root {} или любом другом верхнем элементе, например <body> или <html>.
Если это переменная Sass, вам нужно убедитесь, что файл, который вы пытаетесь скомпилировать. Вы не можете скомпилировать _styles.scss самостоятельно, это должен быть index.scss, и вам нужно убедиться, что ваш компилятор не пытается сначала скомпилировать модули (файлы, начинающиеся с _), так как это, конечно, даст сбой .
Команда @import в основном просто копирует все вместе, поэтому загрузка этого в несколько мест добавит это несколько раз. Модули Sass избегают этого с помощью команды heir @use, но это поддерживается только в Dart Sass, но не в LibSass.