CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.js
George M.
George M.

Reputation: 81

Issue overriding Vuetify styles with my own stylesheets

I am working on a project using Vue2 and Vuetify. The main issue is that my Vuetify styles get imported always after my styles.

Tried this :

App.vue

<template>
  <v-flex>
    <v-card class="myCard"></v-card>
  </v-flex>
</template>

<style>
  .myCard {
      background-color : yellow;
  }
</style>

main.js

import App from './Components/App.vue';
import 'vuetify/dist/vuetify.css'
import Vuetify from 'vuetify';
import Vue from 'vue';

Vue.use(Vuetify);

It seems like the style is loaded inside the <head/> tag before vuetify styles.

I tried loading changing the order of the imports like this : 

import 'vuetify/dist/vuetify.css'
import Vuetify from 'vuetify';
import Vue from 'vue';
import App from './Components/App.vue';

Vue.use(Vuetify);

This doesn't work. Also tried importing all the styles in a Main.scss file loading vuetify styles first, then my own stylesheets but that does not work as well.

How can you enforce the order of stylesheets import?

Upvotes: 2

Views: 1950

Answers (2)

Jodi Williams
Jodi Williams

Reputation: 21

Adding the following to my tailwind.config.js file fixed this problem for me.

module.exports = { important: '#app', }

It adds a selector to the tailwind classes to increase their importance - but without adding !important to the css rule. In my case, that was enough to take precendence over the Vuetify styles.

https://tailwindcss.com/docs/configuration#selector-strategy

Upvotes: 2

EnzoTrompeneers
EnzoTrompeneers

Reputation: 1091

Import the vuetify.css file in your main.css above your css content? Or have a main.scss file where you import different css files where you have control of the order of the files like this:

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Roboto+Mono');

@tailwind preflight;
@import 'buttons';
@import 'tables';
@import 'icons';
@import 'checkbox';
@import 'select';
@import 'tabs';
@import 'cards';
@import 'alerts';
@import 'forms';
@tailwind utilities;

Upvotes: 1

Related Questions