Question

在我的VueJS项目中，我有一个variables.scss文件，其中包含一些变量，当我在本地需要它们时，通常会在组件的@import部分中<style/>。这可以正常工作，但是当我需要这些变量之一作为模板元素的属性时，如何使用它们呢？就我而言，我试图将原色用作bar-color（See here for this component's doc）的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

您可以在javascript文件中设置变量，将文件导入到组件中，然后从中访问它们？

Answer 2

尝试此out，在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>

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

2 个答案: