防止 vuetify 污染全局样式范围 [英] Prevent vuetify from polluting global style scope

问题描述

我正在尝试将一个 Vue 组件从远程源 (npm) 嵌入到另一个组件中，而不使用 Vue 插件.组件按预期安装，但是，因为嵌入式组件使用 Vuetify，它的样式污染了父"组件的样式.应用程序 这里有一些图片，希望能说明我的意思:

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

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

我尝试了此处提到的策略，在嵌入式组件中使用较少在块级别导入 vuetify css，但它似乎对我不起作用.

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

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

解决方案

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

npm i postcss-parent-selector -D

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

module.exports = {插件: [要求(postcss-parent-selector")({选择器:.mywrapperclass"，}),],};

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

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

一些链接:

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

I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:

Note the primary colors of the root application before mounting the embedded component

Upon mounting of the Login (embedded) component:

I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.

I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?

happy to include code if necessary

解决方案

To use with vue.js install postcss-parent-selector

npm i postcss-parent-selector -D

then create a postcss.config.js file in root and add following code

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

Then in public/index.html add a wrapper element around the app:

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

Some links:

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

这篇关于防止 vuetify 污染全局样式范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！