如何更改 vuetify 组件变量？答案

【问题标题】：how change vuetify component variable?如何更改 vuetify 组件变量？
【发布时间】：2020-09-09 11:17:24
【问题描述】：

我想通过使用变量来改变<v-progress>的背景颜色 $progress-circular-underlay-stroke 但新值不影响输出

<template>
 <v-progress-circular
        :rotate="360"
        :size="100"
        :width="15"
        value="20"
        color="primary"
      >
        20
      </v-progress-circular>
</template>
<style lang='scss'>
  @import '~vuetify/src/styles/styles.sass';
  @import '~vuetify/src/components/VProgressCircular/_variables.scss';
  $progress-circular-underlay-stroke = "#FF6859" 
</style>

我的环境是 Vuecli。

【问题讨论】：

您不能从单个文件组件中更改 SCSS 变量，您需要更改您的 webpack 配置。看看这个vuetifyjs.com/en/customization/sass-variables
我阅读了该链接但无法正常工作。

标签： vue.js vuetify.js

【解决方案1】：

您可以覆盖它的样式，如下所示：

.v-progress-circular__underlay {
  stroke: #ff6859 !important;
}

【讨论】：

感谢您的回答。我知道这个类，但我想在我自己的组件中使用 Scss 变量。如果我不能使用它们，那么使用完整的是 Scss 变量