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/>标签中。

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

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

将main.css中的vuetify.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;

Answer 2

在我的tailwind.config.js文件中添加以下内容为我解决了此问题。

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

它将选择器添加到顺风类中以增加其重要性-但未在CSS规则中添加！important。就我而言，这足以取代Vuetify风格。

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

用我自己的样式表发布覆盖Vuetify样式的问题

2 个答案: