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

Question

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

例如，我只想更改$icon-size, $avatar-margin-x一个组件中的值。我怎样才能做到这一点？

Answer 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>