从现有应用程序的样式表中排除 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 中。

我试图通过应用:not(.VUE_CLASS)和div:not(.VUE_CLASS)从现有应用程序的所有 CSS 规则中排除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。

是否可以使用 less 排除div及其所有子元素？

谢谢您最好的问候，

芬恩

Answer 1

如果您只是为VUE_CLASS选择器重置所有 CSS styles 怎么办？

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

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