Rails 7如何用 Bootstrap 5 - importmaps & sprockets

Apr 28, 2022
from: https://blog.eq8.eu/til/how-to-use-bootstrap-5-in-rails-7.html
https://blog.eq8.eu/philosophy/software-philosophy-quotes-and-memes.html

Rails 7 is a breath of fresh air. Thanks to importmaps everything is simple again. JavaScript (JS) is easy to be implemented without the need to install node,npm,yarn,webpack,..other 150 non-Ruby tools on your Laptop

But what about CSS ?

Well there is good old Sprockets (a.k.a Rails asset pipeline) and good old gems contanining SCSS (remember those?)

Let’s make life easy again

Instalation of Bootstrap 5 in Rails 7

JavaScript (JS)

If you don’t have importmaps yet in your Rails project:

# to check if you already have importmaps 
$ cat config/importmap.rb

# to install importmaps in your Rails7 project
$ rails importmap:install

Bash
To add Bootstrap 5 JS to Rails 7 project via importmaps:

$ bin/importmap pin bootstrap
…this will add necessary JS (bootstrap and popperjs) to config/importmaps.rb

Then you need to just import bootstrap in your application.js

// app/javascript/application.js
// ...
import 'bootstrap'

Js
Quick Note:

For some reason popperjs acts broken in my Rails7 project when I load it from default ga.jspm.io CDN. That’s why I recommend to load it from unpkg.com:
# config/importmaps.rb
# ...
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package
# ...

Ruby
CSS (JS)

To install official Bootstrap 5 Ruby gem

# Gemfile
# ...
gem 'bootstrap', '~> 5.1.3'
# ...

Ruby
and bundle install

Then just edit your app/assets/stylesheets/application.scss

// app/assets/stylesheets/application.scss
// ...
@import "bootstrap";
// ...

Sass (Scss)
note: be sure you replace your application.css with application.scss. That means app/assets/stylesheets/application.css should not exist!
If you want to change some variables:

// app/assets/stylesheets/application.scss
// ...
$primary: #c11;
@import "bootstrap";
// ...

Sass (Scss)
Layout files

Make sure your layout (app/views/application.html.erb) contains:

<%# ... %>
<head>
<%# ... %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>  <%# this loads Sprockets/Rails asset pipeline %>
    <%= javascript_importmap_tags %> <%#  this loads JS from importmaps %>
    <%# ... %>
  </head>
  <!-- ... -->

Erb
Alternative solutions

counterarguments

“but this way you load a gem and you don’t use the JS bit of it”
So what? Like if there’s no single gem in your project you don’t use at 100%. I love “vanilla Rails” approach and love to avoid 3rd party gems as much as I can but this will save you so much hustle, especially if you are a beginner new to Rails or you are starting a sideproject (there’s always a time to refactor if you really need to)

“but Sprockets are no longer used”
Yes they are. There was a period of time with RoR 5.2 & 6.x where webpacker was taking over and developers were ditching Rails asset pipeline but this new importmaps approach is fresh breath to bring gems with scss back.

Basecamp (& DHH) were quite clear about it that Sprockets will not disappear anyday soon.

update Well actually I was wrong. Sprockets will probably be replaced by Propshaft in Rails 8. source of this claim

But still Sprockets are the most convinient way how to use CSS in Rails7

what about DartSass
if you decide to configure DartSass Rails go for it.

but --css (esbuild) is there to replace sprockets
No it’s not, same way how webpacker didn’t replace it

But what if CDN provider goes down, then my application JS will not work
Yes you and other billion websites as well. If your project is a bank then yeah sure use your own CDN or load from vendor. But if your project is startup to sell T-shirts then I’m pretty sure everyone will survive that 5 min downtime.

Sources

阅读量: 729
发布于:
修改于: