[Bug Report] Vuetify CSS comes after my own CSS

alechance commented 5 years ago

Versions and Environment

Vuetify: 1.3.3 Vue: 2.5.17 Browsers: Chrome 69.0.3497.100 OS: Mac OS 10.14.0

Steps to reproduce

After cloning then running npm run dev, I'm trying to override .container layout by declaring new properties into my main.styl which is imported after your app.styl.

Expected Behavior

My new flex: none should be working

Actual Behavior

My styles come before Vuetify CSS in my html <head>. In order to work, I have either to declare !important or always increase the specificity by one.

Reproduction Link

https://github.com/alechance/nuxt-vuetify-lodash

vanpav commented 5 years ago

Same issue with overriding stylus variables:

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

$card-border-radius = 16px

@import '~vuetify/src/stylus/app'
@import '~vuetify/src/stylus/components/_cards.styl'

Result duplicates with default vuetify styles: https://monosnap.com/file/JgNaXqr1KwVXPzWwjHIn8rnz2fS9Lh

Any workaround?

So my best workaround is unfortunately do not use a-la-carte. As optimization I split Vendor chunk to vuetify chunk and all other node_modules. In vuetify.js plugin:

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, { your options })

nuxt.config.js

build: {
  optimization: {
      splitChunks: {
        minSize: 50000,
        maxSize: 500000,
        cacheGroups: {
          vuetify: {
            test: /[\\/]node_modules[\\/]vuetify[\\/]/,
            priority: 10,
          },
          vendors: {
            test: /[\\/]node_modules(?![\\/]vuetify)[\\/]/,
            priority: -20,
          },
          default: {
            minChunks: 5,
            priority: -30,
            reuseExistingChunk: true,
          },
        },
      },
  }
}

app.styl

@import '~vuetify/src/stylus/settings/_variables'
$card-border-radius = 16px
@import '~vuetify/src/stylus/main'
// or
@import '~vuetify/src/stylus/app'
@import '~vuetify/src/stylus/components/_cards'
// ...all used components styles

zerosym commented 5 years ago

I ended up working around the ala-carte duplicate style issues by setting stylus-loader options to {preferPathResolver: 'webpack'} and then leveraging a custom webpack resolver plugin that aliases vuetify/src/stylus/settings/_theme.styl references to my own modified copy. You can then put whatever variable overrides you want in there.

JosuaMeier commented 5 years ago

@zerosym can u provide your code to solve the problem?

ZahidAbi commented 5 years ago

I am having same problem on my existing project

KravtsovEgor commented 5 years ago

According to https://medium.com/@jacobedawson/vuetify-vue-cli-3-change-default-font-a70c22adc55 stylus variables can be overwritten the following way

$button-text-transform := none
$tab-text-transform := none
@require '~vuetify/src/stylus/settings/_variables.styl'
//order is significant

AxSch commented 5 years ago

Struggling to figure out why this isn't working for some components - namely v-input fields. The docs aren't very useful in explaining this either...

akash58 commented 5 years ago

I have the same issue with my project when am i reloading the page then pages are cluttering like vuetify css loads very slow. If i reload the page then icons css are coming very slowly.

Examle Link :- https://dazzling-noether-bda9ca.netlify.com/

Screenshot_2019-07-26-13-06-26-62

antoniandre commented 5 years ago

That works for me, after upgrading to Vuetify 2, I decided to override default sass variables. To do so I followed exactly the official guide: https://vuetifyjs.com/en/customization/sass-variables.

As I use scss files I had to paste that in vue.config as well as per docs:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "~@/sass/main.scss"'
      }
    }
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach(match => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
    })
  }
}

After that I modified my sass/main.scss as per docs:

@import '~vuetify/src/styles/styles.sass';
@import './_variables';

// Override Vuetify default variables.
$font-size-root: 14px;
$body-font-family: $main-font; // $main-font comes from my own ./_variables.scss.
$heading-font-family: $title-font; // $title-font comes from my own ./_variables.scss.

// For updating SASS lists
$material-light: map-merge($material-light, ( cards: blue ));
$material-light: map-merge($material-light, ( background: white ));

Now after launching the app I could inspect styles on v-card with dev tools for instance and see it was blue but overridden by another white from Vuetify styles... :/

It turned out I had forgotten to remove the previous import 'vuetify/dist/vuetify.min.css' from Vuetify 1.x use in my main.js!

After removing it all works as expected! 👌❤️

vuetifyjs / nuxt