将Vuetify添加到我的laravel / Vue应用中会破坏一些laravel组件CSS

Question

我有一个laravel / VueJs应用程序，在我决定添加Vuetify之前，它是正常的。用npm安装Vuetify软件包后，我通过资源/ js文件夹内的plugin / vuetify.js文件夹将其导入，例如（在plugin / vuetify.js里面）

fma(a, a, -a*a)

我这样导入了app.js；

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify;

然后在Vue实例中添加vuetify;

import vuetify from './plugin/vuetify'

我的vuetify组件运作良好，但是某些laravel组件（如导航栏）断裂，高度显着增加。当我注释掉vuetify导入时，它恢复正常。有人可以帮忙指出解决办法还是做错了什么？ Laravel 5.8，vuetify 2.0.7

Answer 1

Vuetify和Bootstrap 4共享一些CSS类名称。您试图在同一页面上使用两个不同的CSS框架。 Vuetify可能在引导程序4之后加载，这意味着它正在覆盖一些引导程序CSS。

简单的解决方案是将一个或另一个用于您的应用程序。有一些vue库，可让您轻松将Bootstrap 4与vue结合使用。我以前使用过bootstrap-vue，效果很好。

如果您真的想在同一页面上使用两个不同的CSS框架，则可以在类内部加载vuetify CSS。

例如 app.scss

.my-app {
    @import 'vuetify/dist/vuetify.min.css'
}

app.vue

<template>
  <div class="my-app">
    Everything in here is using vuetify
  </div>
</template>

我的应用程序中的所有内容