时间戳

首页 > 解决方案 > 更改特定组件中的 vuetify scss 变量

vue.js - 更改特定组件中的 vuetify scss 变量

问题描述

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

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

标签： vue.jsvariablessassvuetify.js

解决方案

我想你正在寻找这样的东西： 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>

推荐阅读