css - 防止 vuetify 污染全局样式范围

Question

我试图将一个 Vue 组件从远程源 (npm) 嵌入到另一个组件中，而不使用 Vue 插件。组件按预期安装，但是，因为嵌入式组件使用 Vuetify，它的样式污染了“父”应用程序的样式以下是一些图片，希望能说明我的意思:
在安装嵌入式组件之前注意根应用程序的主要颜色

安装登录(嵌入式)组件后:

我尝试了提到的策略 here ，在嵌入式组件中使用 less 在块级别导入 vuetify css，但它似乎对我不起作用。
我意识到，最终，我可以通过确保嵌入的主题与根应用程序主题匹配来最终解决这个问题，但我宁愿不必依赖它。如果我的组件是使用 webpack 构建的，为什么我无法将 Vuetify 的 css 应用于该组件？有什么建议？
如有必要，很乐意包含代码

Answer 1

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

npm i postcss-parent-selector -D

然后在 root 中创建一个 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