Css 使用 Vuetify 的 sass 变量时出错

In my Vuetify3 application, I am using some library with a select dropdown, which I want to style exactly like Vuetify's select dropdown.

因此，我判断了Vutify的 Select 框，复制了它的样式，并try 了下面这样的box-shadow属性，它运行得很好-

box-shadow:
      0 5px 5px -3px rgba(0, 0, 0, 0.2),
      0 8px 10px 1px rgba(0, 0, 0, 0.14),
      0 3px 14px 2px rgba(0, 0, 0, 0.12);

后来，我发现在node_MODULES内的路径/node_modules/vuetify/lib/styles/settings/_elevations.scss下，编写了以下代码，而Vutify在这里编写了它的box-shadow个样式.

@use '../tools/functions' as *;

$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default;
$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default;
$shadow-key-ambient-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)) !default;

$shadow-key-umbra: () !default;
$shadow-key-umbra: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
    ...,
    8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
    ...
  ),
  $shadow-key-umbra
);

$shadow-key-penumbra: () !default;
$shadow-key-penumbra: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
    ...,
    8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
    ...
  ),
  $shadow-key-penumbra
);

$shadow-key-ambient: () !default;  
$shadow-key-ambient: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
    ...,
    8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
    ...
  ),
  $shadow-key-ambient
);

所以，我导入了Vutify立面样式文件，并try 了这样-

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

box-shadow: $shadow-key-umbra(8),
            $shadow-key-penumbra(8),
            $shadow-key-ambient(8);

但它抛出了未定义变量的错误，$shadow-key-umbra.

在访问这些变量时，我做错了什么？任何帮助都是最好的.