search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
627 stars 105 forks source link

Importing sass "Overrides" for Vuetify Pro Dashboard #209

Closed marcpaskell closed 4 years ago

marcpaskell commented 5 years ago

Module version Nuxt.js@2.10.2 @nuxtjs/vuetify@1.9.0

Describe the bug Importing the override.sass styles from the pro dashboard theme are either not applied or duplicated in every component

To Reproduce standard Nuxt install using npx create-nuxt-app select vuetify copy over dashboard files, including the sass directory add various versions of style imports using:

css: ['@/sass/overrides.sass'] //styles are there but not applied styleResources: {sass: ['./sass/overrides.sass']} //styles are there but duplicated

I also tried putting into customVariables in the Vuetify config... styles are duplicated

Expected behavior Just need somewhere to import the overrides.sass file and the styles to be applied. This did work using vanilla Vue app by importing into main.js import './sass/overrides.sass';

kevinmarrec commented 5 years ago

@marcpaskell Please directly provide a repository with the reproduction

marcpaskell commented 5 years ago

Sure - I've put something quick together here: https://github.com/marcpaskell/nuxt-vuetify-pro-dashboard

If you look at nuxt.config.js you'll see the various approaches to importing overrides.sass

The style we're looking to be applied is simple <td> padding styling.

kevinmarrec commented 4 years ago

@marcpaskell This is not something that is achievable AFAIK, unless using !important or using /deep/ selector : https://vuedose.tips/tips/style-inner-elements-in-scoped-css-using-deep-selector-in-vue-js

And if it would be achievable with some workaround, it's out of scope of Nuxt module and you should consider opening an issue on Vuetify repo (or ask for help around their Discord). Thanks for your understanding.