从 VueJS 组件的 <template> 访问 scss 变量

Question

在我的 VueJS 项目中，我有一个variables.scss文件，其中包含一些变量，当我在本地需要它们时，我通常@import将它们放在<style/>组件部分中。这工作正常，但是当我需要这些变量之一作为模板元素的属性时，如何使用它们？就我而言，我尝试使用我的原色作为bar-colora 的属性progress-bar（请参阅此处了解该组件的文档）。

这是我尝试过但没有成功的方法，即使在我的样式部分导入变量文件之后也是如此：

<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

尝试一下，在 scss 文件中声明变量并将其导出。

像这样
在scss中

$white-color: #fff;

:export {
  whitecolor: $white-color;
}

在 ts

import variables from 'variables.scss';

primary = variables.whitecolor;

在 HTML 中

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