Зараз існує безліч гайдів на тему інтеграції Bootstrap, але лише деякі з них дійсно працюють. Тут я покажу перевірений спосіб, який спрацював у моєму випадку.
1. Додайте Bootstrap до вашого Gemfile
Відкрийте ваш Gemfile і додайте наступний рядок:
gem 'bootstrap', '~> 5.3.0'
Замініть 5.3.0 на версію, яку ви хочете використовувати.
Після цього виконайте команду:
bundle install
Це встановить Bootstrap у вашому Rails-додатку.
2. Bootstrap через Importmap
Щоб додати Bootstrap до вашого Importmap, запустіть наступну команду:
bin/importmap pin bootstrap
Ця команда автоматично додасть Bootstrap до вашого файлу config/importmap.rb, забезпечуючи його доступність у вашому додатку.
3. Імпортуйте Bootstrap у application.js
Щоб включити Bootstrap у вашому JavaScript-коді, додайте наступний рядок у файл app/javascript/application.js:
import "bootstrap"
Це забезпечить підключення Bootstrap до вашого JavaScript-коду, дозволяючи використовувати його компоненти та стилі.
4. Оновіть посилання на Bootstrap та Popper.js у importmap.rb
Щоб гарантувати, що у вас використовуються актуальні версії бібліотек, оновіть посилання на Bootstrap та Popper.js у файлі config/importmap.rb.
Popper.js
Замініть старий рядок:
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8
на новий:
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.8/dist/esm/index.js"
Bootstrap
Замініть старий рядок:
pin "bootstrap" # @5.3.3
на новий:
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
Ці оновлення забезпечать правильне підключення бібліотек з актуальними версіями через відповідні CDN.