Table of contents
yarn add bootstrap
calaca@calaca-PC ~/var/www/edume (bootstrap-configuration)$ yarn add bootstrap yarn add v1.22.19
yarn info boostrap version
calaca@calaca-PC ~/var/www/edume (bootstrap-configuration)$ yarn info boostrap version yarn info v1.22.19 2.0.0 Done in 0.99s.
yarn add @popperjs/core
yarn add v1.22.19
yarn add @popperjs/core is used to add the Popper.js library to your project using Yarn.
It's commonly used in conjunction with other libraries and frameworks like Bootstrap to manage the positioning of elements that need to appear relative to other elements on a web page.
yarn info @popperjs/core version
calaca@calaca-PC ~/var/www/edume (bootstrap-configuration)$ yarn info @popperjs/core version yarn info v1.22.19 2.11.8 Done in 0.19s.
Add the Webpacker gem package
yarn add @rails/webpacker
Create a stylesheets directory
In the context of Bootstrap 5 (or any modern CSS framework), the
app/assets directory is typically reserved for the asset pipeline, which is a legacy approach for managing assets in older versions of Rails.
Create the main stylesheet file
Include CSS with Webpacker
Inside the main view file, which is
app/views/layouts/application.html.erb, it's necessary to add the following line after the
# app/views/layouts/application.html.erb <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
The file is going to look like the following:
The previous command uses the
tylesheet_pack_tag, which is a Rails helper method provided by Webpacker. It's used to include a stylesheet bundle that was defined in your Webpacker configuration. This method takes the name of the pack (or bundle) as an argument.
By convention, the main stylesheet for your application is often named
In this case, we use
'application' because is the name of the stylesheet pack that we want to include, but we can have other named packs for different parts of our application.
'data-turbolinks-track': 'reload': This is an optional HTML attribute that's added to the
data-turbolinks-track attribute with a value of
'reload' ensures that the stylesheet is reloaded when navigating between pages using Turbolinks.
Let's test it
All the following steps are going to be performed in order to test Boostrap, webpacker and Rails 6.
Configure a sample background color
It'll look something like the following:
Stop the server
In order to stop the
Rails Server, let's press the following command:
CTRL + C
Restart the server
Access a specific page
Skip these if you don't run accross any issue.
Cannot find package '@babel/plugin-proposal-private-methods'
node:internal/process/promises:279 triggerUncaughtException(err, true /* fromPromise */); ^ Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /home/calaca/var/www/edume/babel-virtual-resolve-base.js
yarn add @babel/plugin-proposal-private-methods npm install @babel/plugin-proposal-private-methods
@babel/plugin-proposal-private-property-in-object version is not meant to be imported
npm install --save-dev @babel/plugin-proposal-private-property-in-object
You've made it!
Let's become friends
I hope this article has been helpful to you. Please feel free to reach out if you have any questions. Your thoughts, suggestions, and corrections are more than welcome.
By the way, don't hesitate to drop your suggestions for new blog articles.
I look forward to seeing you next time