CODEWITHSUNDEEP
sassvuejs2vuetify.js
Dickson Afful
Dickson Afful

Reputation: 838

How to import vuetify scss variables into components

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>

Upvotes: 2

Views: 1266

Answers (1)

Ansh Saini
Ansh Saini

Reputation: 415

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)

Upvotes: 1

Related Questions