Как избежать конфликта css при интеграции приложения angular 6 в другое приложение?

Question

Мы сделали угловое веб-приложение на 6 и хотели бы интегрировать это веб-приложение в один из наших интернет-магазинов для клиентов.

Проблема в том, что у нас конфликт css.

Например: - Интернет-магазин использует загрузчик 3 и загрузчик нашего приложения 4. - Некоторые магазинные CSS переопределяют веб-приложение CSS.- Некоторые веб-приложения CSS переопределяют Интернет-магазин CSS.

Какое наилучшее решение, чтобы избежать этих конфликтов?

Answer 1

Хороший ответ от @ cloned

Кроме того, вы можете попробовать обернуть одно приложение в одном классе, а другое - в другом классе, поместив класс в тег html.

Затем введите префиксвсе ваши стили для одного приложения, например:

html.app1 .some-style {
  background-color: pink;
}

А для другого приложения:

html.app2 .some-style {
  background-color: green;
}

Если вы используете scss или что-то подобное, это должно быть довольно просто, так как вы можетеиспользуйте вложение.

Answer 2

Лучшее решение - использовать одну версию начальной загрузки для всего проекта.Если вы смешаете bs3 и bs4, будут конфликты, потому что имена классов (для большей части (сетки)) одинаковы, но базовый css отличается.

Одним из решений было бы заключить интернет-магазин в дополнительный div с определенным классом и импортировать bootstrap3 css только для этого класса, например, так (в SASS)

.webshop {
 @import all-of-bootstrap3;
}

Таким образом, начальная загрузка 3работает только для всего, что находится внутри этой оболочки.Поскольку начальная загрузка имеет низкую специфичность, этого должно быть достаточно для ее перезаписи.

Идеальным решением по-прежнему будет использование одной и той же начальной версии для одного проекта.

Редактировать: Конечно, это работает и наоборот, вы также можете обернуть все ваши компоненты в один класс, чтобы все ваши CSS использовали более высокую специфику.Может быть даже лучшим решением, если вам нужно поддерживать несколько клиентов.

Вы, конечно, также можете изменить CSS из самой начальной загрузки, как описано здесь Настройка имен классов начальной загрузки Twitter