Rodrigo Serrano

Joined

2,010 Experience
20 Lessons Completed
0 Questions Solved

Activity

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

Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

© 2024 GoRails, LLC. All rights reserved.