Выпуск переопределения стилей Vuetify с моими собственными таблицами стилей

Question

Я работаю над проектом с использованием Vue2 и Vuetify.Основная проблема заключается в том, что мои стили Vuetify всегда импортируются после моих стилей.

Попробовал это:

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);

Похоже, что стиль загружается внутри тега <head/> перед использованием стилей vuetify.

Я попытался загрузить, изменив порядок импорта следующим образом:

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

Vue.use(Vuetify);

Это не работает.Также попытался импортировать все стили в файле Main.scss. Сначала загрузите стили vuetify, затем мои собственные таблицы стилей, но это также не работает.

Как вы можете обеспечить порядок импорта таблиц стилей?

Answer 1

Импортировать файл vuetify.css в ваш main.css выше вашего css контента?Или есть файл main.scss, в который вы импортируете разные css-файлы, в которых вы можете управлять порядком файлов:

@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;