Переопределить переменные Postcss/CssNext VueJs

Question

У меня есть файл _colors.scss, где я определяю некоторые переменные cssnext, как это:

 :root {
  --color-red: red;
}

Затем у меня есть обычный файл App.vue с частью scss, где я хочу переопределить эти переменные следующим образом:

.darkmode {
  --color-red: green;
}

затем я применяю класс darkmode к элементу div, окружающему все остальные элементы. Цель состоит в том, чтобы в основном переопределить значение var, чтобы иметь разные стили.

Моя проблема: переопределение не происходит. Что я делаю неправильно?