时间戳

首页 > 解决方案 > 从现有应用程序的样式表中排除 Vue 组件

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

问题描述

我们将 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通过应用 a:not(.VUE_CLASS)和 a从现有应用程序的所有 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/）。使用 aniframe不是一个选项，因为我们无法从 iframe 访问我们的支持。我也不能使用Web组件，因为我们必须支持ie11。

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

谢谢您最好的问候，

芬恩

标签： javascripthtmlcssvue.jsless

解决方案

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

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

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

推荐阅读