Vue.js 具有动态百分比的scss中的线性梯度

我想制作一个带有背景线性渐变的进度条，并在vue的scss中使用预定义的主题颜色。例如：

。进度{
背景图像：线性渐变（向右，$start color 0%，$start color 50%，$end color 50%，$end color 100%）；
}

---

50%

由vue中的代码动态更改。如果我在

：style=“{}”

中编写样式，那么我不能使用预定义的scss颜色

$start color

和

$end color

，您应该使用CSS模块下可互操作的CSS中的

：export

块

作为一个例子，考虑下面的给定的摘录，首先在您的SASS文件中定义了颜色（例如颜色。SCSS）：

使用该设置和样式加载程序（当前必须安装）后，您可以像在Vue应用程序中导入通常的js模块一样导入文件，如下所示：

import colorVariables from 'colors.scss'

colorVariables.primaryColor // => Will now have the value of the color as a string.

现在，您可以使用Vue的：style绑定来定义线性渐变。您可以在以下链接中阅读有关导出的更多信息：在CSS模块下

import colorVariables from 'colors.scss'

colorVariables.primaryColor // => Will now have the value of the color as a string.