Исключить Vue Компонент из таблицы стилей существующего приложения - PullRequest
Новая
       41

Исключить Vue Компонент из таблицы стилей существующего приложения

0 голосов
/ 29 апреля 2020

Мы встраиваем компонент Vue (используя vuetify) в существующее приложение. net MVC. Приложение загружает веб-пакет в div. Проблема в том, что компонент vue наследует все CSS существующего приложения. Упрощенная версия HTML выглядит следующим образом: 


<html>
<head>

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

Стиль написан на css .less.

Я пытался исключить VUE_CLASS из всех CSS Правил существующего приложения, применяя :not(.VUE_CLASS) и 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. Я также не могу использовать веб-компоненты, потому что мы должны поддерживать ie11.

Можно ли исключить div и все его дочерние элементы, использующие less?

Спасибо и наилучшими пожеланиями,

Финн

1 Ответ

0 голосов
/ 29 апреля 2020

Что если вы просто сбросите все стили CSS для селектора VUE_CLASS?

Попробуйте добавить это правило в конце тега <style>: 

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