Как передать в цикл vue переменную scss?

Question

[Andrej Sharapov]

Привет всем! Нужна помощь.

1. Есть набор SCSS переменных для экспорта

:export {
  dev : '#885AF8';
  des : '#885AF8';
}

2. Есть некий JSON (timeline), в котором прописан лейбл, соответствующий названию переменной

[
  {
    "label": "dev",
  },
  {
    "label": "des",
  }
]

3. Есть компонент VUE, который принимает JSON файл. Но он не содержит цвет (т.е. параметр l.color)

template
  ...
    v-timeline-item(v-for="(l, i) in timeline"
      :key="i"
      :color="l.color ? l.color : 'var(--page-color)'"

Вопрос. Как прописать связь между SCSS и JSON файлом и вывести всё во Vue компонент?

Двигаюсь пока в этом направлении:

vue component

import COLORS from '@/assets/sass/utils/_vars.scss';

const SCSS = {
  dev  : COLORS.dev,
  des  : COLORS.des,
}

  //- застрял тут

  computed: {
    labelColor() {
      return this.timeline
    }
  }

Что дальше писать? Компьютед свойство? Подскажите, как его правильно прописать?
По идее, решение должно быть вроде этого: SCSS.var = JSON.label

и в шаблоне тогда будет так:

:color="labelColor === l.label ? .............. : 'var(--page-color)'"

Скажите, правильно хоть двигаюсь?)) Кто может, поделитесь решением, пожалуйста.

Answer 1

[Игорь Стасюк]

Andrej Sharapov Сделать классы хелперы, которые используют переменные scss, и конкретно блокам в зависимости от условий, присваивать нужный класс. В ином случае вам прийдется дублировать цвет в json или константы глобальные js