0

Ситуация следующая: Я воспользовался компонентом из бутстрапа и мне нужно частично импортировать стили только лишь для этого компонента. Такое в теории возможно ?

В документации по подключению он мне предлагает глобально просто все стили подключить и все, но так не получится, так как у меня есть созвучное название классов и стили наложились на другой компонент и получилась беда.

Кто может что-нибудь посоветовать ?

1 ответ 1

0

Можно. Устанавливаете SCSS (если не установили по какой-то причине), отключаете автоматическую загрузку css в настройках bootstrap-vue (bootstrapVueCSS: false), собираете bootstrap/bootstrap-vue как душе угодно.

Что делать:

  1. Заходите в исходники (~bootstrap-vue/src/index.scss)
  2. Видите нужные импорты и смотрите, что важно а что нет (utilities и variables скорее всего нужны для всего)
  3. Идёте в компонентные импорты (components/index)
  4. Импортите себе то, что нужно

Т.е файл примерно будет так выглядеть для подгрузки стилей только для компонента BTime:

@import "~bootstrap-vue/src/_variables";
@import "~bootstrap-vue/src/_utilities";

@import "~bootstrap-vue/src/components/time/index"

Учтите, что у bootstrap-vue не так много стилей, он зависит от bootstrap, у которого свои стили. Там тоже нужно отдельно SCSS пересобирать, если требуется (по инструкции из официальной документации Bootstrap можно, там описаны шаги, аналогичные выше).


Но вообще я бы Вам рекомендовал просто переименовать классы от именно ваших компонентов, если Вы не гонитесь за уменьшением размера бандла. Это банально проще.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.