Как ограничить действия стилей Bootstrap?

Question

[igor_solweb]

Всем привет.
Имеется сайт на wp. Шорткодом подключаю vue компонент на одну из страниц, в компоненте используется Bootstrap vue для стилей. Все бы ничего, но стили бутстрап перекрывают общие стили верстки футера сайта, где бутстрап вообще не используется, как можно ограничить действие бутстрап стилей только на сам компонент vue? ограничивал через Style scoped не работает

Comments

[Евгений]

почему Style scoped не работает? Может эту проблему лучше решить?

[igor_solweb]

Евгений, подключил Bootstrap vue вот так:

<style scoped>
    @import 'https://unpkg.com/bootstrap/dist/css/bootstrap.min.css';
    @import 'https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css';
</style>

эффекта нет, ошибок нет, но футер весь поехал, если просто убрать импорт этих стилей внешних, то все ок

[Евгений]

igor_solweb, так работать не будет, импорт глобально подключает, как вариант вытащить стили те, которые нужны для компонента. Ну и вообще вы тянете весь фреймворк наверное только ради пары кнопок

[igor_solweb]

Евгений, ну по сути не ради пары кнопок а очень много стилей по умолчанию от бутстрапа беру и саму сетку, если речь о том, чтобы переделать, то это точно не вариант, еще пробовал сейчас через functions.php в самой главной теме WP задать зависимость идентификатора класса, чтобы опустить bootstrap.css, он встал перед тем файлом, который перекрывал, но результата не дало, по всей видимости влияют бутсраповские !importЫ.

[Ankhena]

Почему-то я думаю, что логичнее либо подключать бутстрап ко всему проекту либо отказаться от него вовсе.
А то кашка какая-то.

[igor_solweb]

Ankhena, согласен в целом, но ситуации разные бывают

[Ankhena]

igor_solweb, вы уверены, что это конфликт бутстрапа, а не нормалайза, который с ним в комплекте или box-sizing?

[igor_solweb]

Ankhena, да там ребут присутствует, он сбрасывает то, что не нужно