Частичное подключение стилей bootstrap-vue
Ситуация следующая: Я воспользовался компонентом из бутстрапа и мне нужно частично импортировать стили только лишь для этого компонента. Такое в теории возможно ?
В документации по подключению он мне предлагает глобально просто все стили подключить и все, но так не получится, так как у меня есть созвучное название классов и стили наложились на другой компонент и получилась беда.
Кто может что-нибудь посоветовать ?
Ответы (1 шт):
Можно. Устанавливаете SCSS (если не установили по какой-то причине), отключаете автоматическую загрузку css в настройках bootstrap-vue (bootstrapVueCSS: false), собираете bootstrap/bootstrap-vue как душе угодно.
Что делать:
- Заходите в исходники (
~bootstrap-vue/src/index.scss) - Видите нужные импорты и смотрите, что важно а что нет (
utilitiesиvariablesскорее всего нужны для всего) - Идёте в компонентные импорты (
components/index) - Импортите себе то, что нужно
Т.е файл примерно будет так выглядеть для подгрузки стилей только для компонента BTime:
@import "~bootstrap-vue/src/_variables";
@import "~bootstrap-vue/src/_utilities";
@import "~bootstrap-vue/src/components/time/index"
Учтите, что у bootstrap-vue не так много стилей, он зависит от bootstrap, у которого свои стили. Там тоже нужно отдельно SCSS пересобирать, если требуется (по инструкции из официальной документации Bootstrap можно, там описаны шаги, аналогичные выше).
Но вообще я бы Вам рекомендовал просто переименовать классы от именно ваших компонентов, если Вы не гонитесь за уменьшением размера бандла. Это банально проще.