如何在资产的自定义scss文件中使用vuetify主题颜色

Question

我在Nuxt + Vuetify中定义了自定义颜色：

vuetify: {
    theme: {
         options: {customProperties: true},
         themes: {
              light: {
                   primary: {
                        lighten1: '#AFB5D1' //inactive icons
                   }
              }
         }
    }
}

还在nuxt config css中添加了文件elements.scss：~assets/style/elements.scss 我想在其中使用主色变亮的地方。

.separator {
     color: var(--v-primary-lighten1);
}

我希望在页面上看到标记有类分隔符的元素的颜色#AFB5D1。在chrome inspector类中，看起来正确，但未解析颜色并且未应用颜色。 我在做什么错了？