Rodrigo Serrano

Joined

2,510 Experience
25 Lessons Completed
0 Questions Solved

Activity

Posted in How to use Bootstrap with CSS bundling in Rails Discussion

I'm assuming that you have installed Rails 7 with the -c bootstrap option, as shown in the video.

To install bootstrap-icons, you should do the following:

$ yarn add bootstrap-icons
$ echo "@import 'bootstrap-icons/font/bootstrap-icons';" >> app/assets/stylesheets/application.bootstrap.scss

Unfortunately that is not enough: you also need to make sure that the fonts are included in the asset pipeline. An easy way to do it is to copy them with your build script. Open your package.json, and edit as follows:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "yarn bootstrap-icons:copy-fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "bootstrap-icons:copy-fonts": "mkdir -p app/assets/fonts && cp -r node_modules/bootstrap-icons/font/fonts/ app/assets/fonts/"
  }

Don't forget to add the line //= link_tree ../fonts to app/assets/config/manifest.js

This recipe was inspired by this Jared White article: https://dev.to/jaredcwhite/how-to-install-shoelace-with-rails-7-esbuild-and-postcss-1cg9