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

将以下内容添加到我的 tailwind.config.js 文件为我解决了这个问题。

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

它为顺风类添加了一个选择器以增加它们的重要性——但没有将 !important 添加到 css 规则中。就我而言，这足以胜过 Vuetify 样式。

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

Answer 2

在您的 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;