防止 vuetify 污染全局样式范围

Question

我试图将一个 Vue 组件从远程源 (npm) 嵌入到另一个组件中，而不使用 Vue 插件。组件按预期安装，但是，因为嵌入式组件使用 Vuetify，它的样式污染了“父”应用程序的样式下面是一些图像，希望能够说明我的意思：

在安装嵌入式组件之前注意根应用程序的原色

安装登录（嵌入式）组件后：

我尝试了这里提到的策略，在嵌入式组件中使用 less 在块级别导入 vuetify css，但它似乎对我不起作用。

我意识到，最终，我可以通过确保嵌入式主题与根应用程序主题匹配来最终解决这个问题，但我宁愿不必依赖于此。如果我的组件是使用 webpack 构建的，为什么我无法将 Vuetify 的 css 应用于该组件？有什么建议么？

如有必要，很乐意包含代码

Answer 1

我目前的申请也遇到同样的问题。我想出的可能的解决方案是：

-通过 iframe 嵌入子 Vue 应用程序，并使用 vuex-iframe-sync 等库在 Vuetify 根应用程序和子应用程序之间传递 props。

- 完全禁用 Vuetify 主题，也许可以自己自定义组件：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: { disable: true },
})

-另一个选择是使用 webpack 配置来运行 PostCSS 插件，并可能在捆绑应用程序时向 Vuetify 的全局样式添加前缀，但我不知道如何操作。

如果您在这个主题上取得任何进展，请告诉我！