更改特定组件中的 vuetify scss 变量

【问题标题】：change vuetify scss variables in specific component更改特定组件中的 vuetify scss 变量
【发布时间】：2023-04-08 20:07:01
【问题描述】：

我在 Vue-cli 项目中使用过 Vuetify。我在项目的src/styles 目录中有variables.scss 文件。现在我想只在一个组件中更改 Vuetify Scss 变量而不影响其他组件？

例如，我只想更改一个组件中的$icon-size, $avatar-margin-x 值。我该怎么做？

【问题讨论】：

只需添加一个包装类，在其中，我们在 scss 中所做的方式，您可以更改任何预定义的 vuetify 类的样式。你试过这样吗？

标签： vue.js variables sass vuetify.js

【解决方案1】：

我认为您正在寻找这样的东西： https://vuetifyjs.com/en/features/sass-variables/#usage-in-templates

对于全局变量

<style lang="sass">
  @import '~vuetify/src/styles/styles.sass'

  @media #{map-get($display-breakpoints, 'md-and-down')}
    .custom-class
      display: none
</style>

每个组件：

<style lang="scss">
  @import '~vuetify/src/components/VStepper/_variables.scss';

  .custom-class {
    padding: $stepper-step-padding;
  }
</style>

【讨论】：