从现有应用程序的样式表中排除Vue组件

Question

我们将vue组件（使用vuetify）构建到现有的.net MVC应用程序中。应用程序将Webpack加载到div中。问题在于，vue组件继承了现有应用程序的所有CSS。简化的HTML版本如下所示：


<html>
<head>

</head>
<body>
    ...
    <div class="VUE_CLASS">
        //vue component...
    </div>
    ...
</body>
</html>

样式以css.less编写。

我试图通过应用VUE_CLASS和:not(.VUE_CLASS)从现有应用程序的所有CSS规则中排除div:not(.VUE_CLASS)。我还尝试将其包装在css.less中的所有规则周围：

*:not(.VUE_CLASS){
//...css rules of the existing application
}

不起作用

我阅读了其他一些策略（https://kloudless.com/blog/2019/02/05/creating-a-reusable-vuetify-component-to-use-in-other-apps/）。不能使用iframe，因为我们无法从iframe访问支持的内容。我也不能使用Web组件，因为我们必须支持ie11。

是否可以使用更少的值排除div及其所有子元素？

感谢您和最诚挚的问候，

Finn

Answer 1

如果仅重置VUE_CLASS选择器的所有CSS样式怎么办？

尝试在<style>标记的末尾添加此规则：

.VUE_CLASS {
  all: unset !important;
  /* Write the other styles for this component below */
}