In my current project, I am utilizing Vue2 and Vuetify. One of the main challenges I am facing is that my Vuetify styles are always imported after my own custom styles.
I attempted the following:
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 appears that the style is being loaded within the <head/> tag before vuetify styles.
I have tried changing the order of imports as follows:
import 'vuetify/dist/vuetify.css'
import Vuetify from 'vuetify';
import Vue from 'vue';
import App from './Components/App.vue';
Vue.use(Vuetify);
However, this approach has not been successful. I also experimented with importing all styles in a Main.scss file, prioritizing vuetify styles first followed by my own stylesheets, but this method did not work either.
Is there a way to control the order of stylesheet imports?