How to import vuetify scss variables into components

Question

How do I import the the vuetify scss variables and apply to my styling in a component. I wanted to access the colors scss (especially the primary, secondary colors etc) My attempt is shown below.

<style lang="scss" scoped>
@import "~vuetify/src/styles/styles.sass";

.bg-red {
  background-color: map-get($colors, "red");
  &:hover {
    background-color: map-get($colors, "yellow");
  }
}
</style>

Answer 1

https://vuetifyjs.com/en/features/theme/#custom-properties

You don't need to import the .scss file for this. You can simply access your theme colors by doing:

background-color: var(--v-primary-base)