Unable to override styles in vuetify

Question

how can I overwrite actual classes in vuetify?

I have created a ./src/stylus/main.styl file where I override some of the current vuetify settings as a test:

Answer 1

Some variables need to be set BEFORE importing _variables.styl because they are used to set other variables in that file. This works because Vuetify is using conditional assignment (:=) in the stylus files.

The safest way is to set all top-level variables before importing any other files.

// set these variables before Vuetify does
$body-font-family = Arial
$alert-font-size = 18px

Then, import _variables.styl so that you can override the nested values:

@import '~vuetify/src/stylus/settings/_variables'

// now that the $material-dark hash exists, set the background
$material-dark.background = 'green'

Then, import the main.styl so that the Vuetify CSS classes are created:

// import main to set all styles
@import '~vuetify/src/stylus/main'

// override the CSS classes using stylus variables
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

Vuetify is using conditional assignment operators in the stylus files. So if you set the variable before the @import, it will persist after the @import. This is important because _variables.styl references those variables internally.

Specifically in this case, $heading-font-family := $body-font-family. Then the $headings hash is set using the value of $heading-font-family. This means that by the time you were setting $body-font-family, $heading-font-family was already set to the default value.

The override of .display-2 styles wasn't working because it didn't exist yet. So when you imported main.styl, it was getting set back to the default values.

You can clean it up a little by breaking it into several files:

src/assets/stylus/variables.styl

// set all top-level variables
$body-font-family = Arial
$alert-font-size = 18px

src/assets/stylus/theme.styl

// set all nested variables
$material-dark.background = 'green'

src/assets/stylus/app.styl

// override CSS styles
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

src/assets/stylus/main.styl

// pull it all together
@import 'variables'
@import '~vuetify/src/stylus/settings/_variables'
@import 'theme'
@import '~vuetify/src/stylus/main'
@import 'app`