How to override default vuetify styles?

[altynbek07]

Module version @nuxtjs/vuetify@1.11.0

Describe the bug I want to overwrite default vuetify styles (not variables) with my custom styles. But vuetify styles is overwritten with custom styles.

To Reproduce For example: In file nuxt.config.js:

...
css: [
    '~assets/scss/style.scss'
],
...
buildModules: [
    ['@nuxtjs/vuetify',
      {
        /*
        ** some options
        */
      }
    ],
]

In file assets/scss/style.scss:

.container {
    padding-top:0;
    padding-bottom: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

Expected behavior I have a lot of files where I redefine styles and so I want my .container class styles to apply. Is there any correct way to prioritize my class files?

Additional context default .container class styles:

.container {
    width: 100%;
    padding: 12px;
    margin-right: auto;
    margin-left: auto;
}

Screenshots

[marcpaskell]

Try importing them via a plugin in nuxt.config

~/plugins/vendor/vuetify'

import '~/sass/overrides.sass';

[altynbek07]

@marcpaskell As a temporary solution, I did this: In file nuxt.config.js:

...
css: [
    // '~assets/scss/style.scss'
],
...

In file layouts/default.vue:

...
<style lang="sass">
@import assets/scss/style.scss
</style>

[RensBoeser]

I tried this temporary solution and it worked for a while. As of late we tried to remove our seperate layouts and used only one: the default.vue. Now this temporary fix doesn't work anymore in dev, only in production builds.

[KareemDa]

Any updates on this issue?

[HakimBhd]

You have to override sass variables and even style using customVariables option

file: nuxt.config.js

...
buildModules: [
    ['@nuxtjs/vuetify',
      {
        ...
        treeShake: true,
        customVariables: ['~/assets/styles/vuetify/variables'],     
      }
    ],
]

enabling treeShake is important!

and then change variables or override style file: assets/styles/vuetify/variables/index.scss

$body-font-family: 'Cairo';

.container {
  width: 100%;
  padding: 12px;
  margin-right: auto;
  margin-left: auto;
}

@import "~vuetify/src/styles/styles.sass";