防止vuetify污染全局样式范围

Question

我实际上是在不使用Vue插件的情况下，将Vue组件从远程源（npm）嵌入到另一个组件中。组件正在按预期方式安装，但是，因为嵌入式组件使用Vuetify，它的样式正在污染“父”应用程序的样式。以下是一些图片，它们有望说明我的意思：

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

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

我尝试了here中提到的策略，在嵌入式组件中使用较少的代码来在块级导入vuetify css，但似乎对我来说不起作用。

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

愿意在必要时添加代码

Answer 1

要与 vue.js 一起使用，请安装 postcss-parent-selector

npm i postcss-parent-selector -D

然后在根目录下创建一个 postcss.config.js 文件并添加以下代码

module.exports = {
  plugins: [
    require("postcss-parent-selector")({
      selector: ".mywrapperclass",
    }),
  ],
};

然后在 public/index.html 中为应用添加一个包装元素：

<div class="mywrapperclass">
  <div id="app"></div>
</div>

一些链接：

• https://vue-loader-v14.vuejs.org/en/features/postcss.html
• https://www.npmjs.com/package/postcss-parent-selector
• https://github.com/postcss/postcss

Answer 2

我的应用程序当前存在相同的问题。我想出的可能解决方案是：

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

-一起禁用Vuetify主题，也许自己定制组件：

// src/plugins/vuetify.js

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

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

-另一个选项是使用webpack config运行PostCSS插件，并可能在捆绑应用程序时为Vuetify的全局样式添加前缀，但是我不知道怎么做。

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