如何获取Vuetify组件SASS变量？VBtn内图片适配求解

问题说明 #

尝试在Vuetify的<v-btn>组件中嵌入图片时，两种常见写法都会导致按钮过宽、图片尺寸超出预期：

1. 使用原生<img>标签：

<template>
  <v-btn>
    <img class="img-in-btn" src="@/assets/my-image.png">
  </v-btn>
</template>

2. 使用Vuetify的<v-img>组件：

<v-img :src="my-img" height="100%" width="100%" />

尝试通过引入Vuetify按钮变量来约束图片尺寸时，出现Sass错误：

<style lang="scss" scoped>
  @import '~vuetify/src/components/VBtn/_variables.scss';
  
  .img-in-btn {
    height: $btn-sizes;
    object-fit: contain;
  }
</style>

报错信息：

SassError: ("x-small": 20, "small": 28, "default": 36, "large": 44, "x-large": 52) isn't a valid CSS value.

解决方案 #

方法1：正确使用Sass映射取值 #

$btn-sizes是一个Sass映射（键值对集合），不能直接赋值给CSS属性，需要用map-get根据按钮尺寸提取对应数值：

<style lang="scss" scoped>
  @import '~vuetify/src/components/VBtn/_variables.scss';
  
  .img-in-btn {
    // 若按钮为默认尺寸，取'default'对应的值；按钮用small尺寸则改为'small'
    height: map-get($btn-sizes, 'default');
    width: auto;
    object-fit: contain;
  }
</style>

方法2：复用Vuetify内置按钮图标样式 #

Vuetify自带v-btn__icon类，专门用于适配按钮内的图标/图片尺寸，直接给图片添加该类即可自动匹配按钮大小：

<template>
  <v-btn>
    <img class="v-btn__icon" src="@/assets/my-image.png">
  </v-btn>
</template>

或搭配<v-img>使用：

<template>
  <v-btn>
    <v-img class="v-btn__icon" :src="my-img" />
  </v-btn>
</template>

方法3：直接设置相对/固定尺寸 #

如果不需要依赖Vuetify主题变量，可直接给图片设置相对按钮的百分比尺寸，确保在按钮内适配：

<template>
  <v-btn>
    <img class="img-in-btn" src="@/assets/my-image.png">
  </v-btn>
</template>

<style scoped>
.img-in-btn {
  height: 80%;
  width: auto;
  object-fit: contain;
  margin: auto; /* 让图片在按钮内居中对齐 */
}
</style>

内容的提问来源于stack exchange，提问作者starleaf1