Cài đặt gem bootstrap và sử dụng boostrap trong dự án ruby on rails

Để nhúng bootstrap vào trong dự án của bạn. Bạn có thể nhúng trực tiếp thông qua CDN của bootstrap. Hoặc có thể import vào dự án qua webpack, hoặc sử dụng gem bootstrap trong bài viết này. Với việc sử dụng gem bootstrap yêu cầu dự án của bạn phải sử dụng thư viện sprockets.

Trước tiên bạn mở Gemfile và bổ sung gem boostrap vào như sau:

gem 'bootstrap', '~> 5.2.2'

Và đảm bảo rằng sprockets-rails của bạn version tối thiểu phải là v2.3.2
Sau đó chúng ta cần chạy lệnh  bundle install  để thư viện được tải xuống và khởi động lại server.
Thêm style bootstrap vào  app/assets/stylesheets/application.scss
 

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

Đảm bảo tệp có phần mở rộng .scss (hoặc .sass cho cú pháp Sass). Nếu bạn vừa tạo một ứng dụng Rails mới, nó có thể đi kèm với tệp .css. Nếu tệp này tồn tại, nó sẽ được phục vụ thay vì Sass, vì vậy hãy đổi tên nó:
 

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Sau đó, xóa tất cả các câu lệnh *= require và *= require_tree khỏi tệp Sass. Thay vào đó, hãy sử dụng @import để nhập tệp Sass.

Không sử dụng *= yêu cầu trong Sass, nếu không các biểu định kiểu khác của bạn sẽ không thể truy cập các biến và hỗn hợp Bootstrap.

Bootstrap JavaScript có thể tùy chọn sử dụng jQuery. Nếu bạn đang sử dụng Rails 5.1+, bạn có thể thêm jquery-rails gem vào Gemfile của mình:

gem 'jquery-rails'

Tiếp theo bạn cần bổ sung dòng code sau vào file config/initializers/assets.rb

# config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)

Cuối cùng bạn cần bổ sung bootstrap vào trong file application.js

 

//= require jquery3
//= require popper
//= require bootstrap

Vậy là chúng ta đã có thể sử dụng bootstrap trong dự án của mình rồi.
Chúc các bạn thành công.
Tham khảo: https://github.com/twbs/bootstrap-rubygem

Video thao tác cùng dandev