Доступ к переменной s css из <template>компонента VueJS

Question

В моем проекте VueJS у меня есть файл variables.scss, который содержит несколько переменных, которые обычно @import содержатся в разделе <style/> моих компонентов, когда они мне нужны локально. Это прекрасно работает, но как я могу использовать одну из этих переменных, когда они нужны мне как атрибуты элемента моего шаблона? В моем случае я пытаюсь использовать свой основной цвет в качестве атрибута bar-color для progress-bar ( См. Здесь для этого компонента do c).

Вот что я пытался безуспешно, даже после импорта файла переменных в моем разделе стилей:

<template>
...
<progress-bar :val="value" size="large" bar-color="$primary"></progress-bar>
...
</template>

<style lang="scss" scoped>
@import "../assets/styles/variables.scss";
</style>

Answer 1

Вы можете установить свои переменные в файле javascript, импортировать файл в свой компонент и затем получить к ним доступ вместо этого?

Answer 2

Попробуйте out , объявите переменные в файле s css и экспортируйте его.

вот так
В s css

$white-color: #fff;

:export {
  whitecolor: $white-color;
}

In ts

import variables from 'variables.scss';

primary = variables.whitecolor;

In HTML

<progress-bar :val="value" size="large" :bar-color="primary"></progress-bar>

Answer 3

Я думаю, что вы не можете, так как переменные s css разрешаются во время компиляции, а не во время выполнения. Вы можете использовать класс, который использует эту переменную.