Не понимаю почему стили компонентов не видят глобальные переменные scss, но видят глобальны переменные css

.primary {
  color: var(--red); \\ её компонент next.js видит
  background-color: $primary; \\ её не видит
}

[