使用Vuetify3 Sass阴影变量时遇未定义错误，求解决

错误原因 #

你把Sass映射（Map）当成函数来调用了。$shadow-key-umbra、$shadow-key-penumbra、$shadow-key-ambient都是键值对结构的Map，键是阴影层级（0-24），值是对应的阴影样式，不能用$shadow-key-umbra(8)这种函数调用的语法。

正确写法 #

方法1：直接通过Map取值

使用Sass的map-get函数提取对应层级的阴影值：

@use "vuetify/lib/styles/settings/_elevation" as elevation;

box-shadow: 
  map-get(elevation.$shadow-key-umbra, 8),
  map-get(elevation.$shadow-key-penumbra, 8),
  map-get(elevation.$shadow-key-ambient, 8);

方法2：用Vuetify封装的工具函数（更简洁）

Vuetify已经提供了现成的elevation函数来生成完整阴影，直接调用即可：

@use "vuetify/lib/styles/functions/elevation" as *;

box-shadow: elevation(8);

方法3：使用Vuetify的Elevation Mixin

如果需要一次性应用所有阴影相关样式（包括过渡效果等），可以用官方的mixin：

@use "vuetify/lib/styles/mixins/elevation" as *;

@include v-elevation(8);

补充说明 #

三种方法都能实现和Vuetify原生下拉选择器完全一致的阴影效果，其中方法2和3更贴合Vuetify的设计体系，后续如果框架更新阴影参数，你的代码也能自动同步，不用手动调整。

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