使用我自己的样式表来覆盖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);

似乎样式在vuetify样式之前加载在<head/>标签内。

我尝试加载更改导入的顺序，如下所示：

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

在你的css内容上面的main.css中导入vuetify.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;