将 Vuetify 添加到我的 laravel/Vue 应用程序会破坏一些 laravel 组件 css

Posted 2023-02-22

【中文标题】将 Vuetify 添加到我的 laravel/Vue 应用程序会破坏一些 laravel 组件 css

【英文标题】：Adding Vuetify to my laravel/Vue app breaks some laravel components css

【发布时间】：2019-12-28 04:57:43

【问题描述】：

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

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

Vue.use(Vuetify)

export default new Vuetify;

我是这样导入到 app.js 中的；

import vuetify from './plugin/vuetify'

并在Vue实例中添加了vuetify；

const app = new Vue(
    el: '#app',
    router,
    vuetify
);

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

【问题讨论】：

你的 laravel 组件使用什么 css 库？

感谢@hdifen。我正在使用 bootstrap 4

【参考方案1】：

Vuetify 和 Bootstrap 4 共享它们的一些 css 类名称。您正在尝试在同一页面上使用两个不同的 css 框架。 Vuetify 可能在 bootstrap 4 之后加载，这意味着它覆盖了一些 bootstrap 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>