如何在不影响其余应用程序样式的情况下将 Vuetify 样式的组件包含到 Bootstrap Nuxt 应用程序中？答案

【问题标题】：How do I include a Vuetify styled component into a Bootstrap Nuxt app without affecting styles of rest of application?如何在不影响其余应用程序样式的情况下将 Vuetify 样式的组件包含到 Bootstrap Nuxt 应用程序中？
【发布时间】：2020-11-27 19:46:28
【问题描述】：

我有一个使用 Vuetify 设计的组件，我正在尝试在我的 Nuxt.js 应用程序中使用它，该应用程序使用 Bootstrap 进行样式设置。我有什么方法可以在不影响应用程序其余部分的样式的情况下使用我的 Vuetify 组件？我尝试在组件的 head() 标记中导入 Vuetify 并导入特定的 Vuetify 组件，但没有运气。在我的应用程序中，样式到处都是冲突的。

【问题讨论】：

我认为你不能。 Bootstrap 是一个 css 框架，默认情况下它将在您的应用程序中提供许多默认设置。 vuetify 也会做同样的事情。因此，您只能使用一个 CSS 库作为默认值。或者一个或另一个。两个 css 框架不能一起工作。

标签： vue.js bootstrap-4 vuetify.js nuxt.js

【解决方案1】：

css 中的“作用域”属性可能有助于解决您的问题

【讨论】：

【解决方案2】：

根据responses here 的一些说法，这是可能的。您可以使用 scoped 样式标签在您的 vuetify 组件中导入 vuetify css，这样它就不会与引导样式冲突。

【讨论】：