Webpacker. As the framework shifts away from
sprocketsand the asset pipeline to embrace the dominating methodology of handling frontend affairs in the
webpack, we have to adapt along. The way to setup a css framework to bootstrap your application has undergone a revamp, and this article seeks to cover the essential steps to set it up.
This article will assume you have set up all the required tools required for a typical Rails 6 application.
The main extra tool you will need as compared to previous versions of Rails is the
yarn package manager. You can install
yarn on your computer via various ways based on your preference and your OS.
We will not be covering it in this article.
Setting Up Bootstrap
First, the latest changes in the
Second, having an intermediate wrapper increase the potential points of failure during the wrapping process.
Third, we are really dependent on the angels who are working on these wrappers. If they do not update the gems frequently, we are stuck with the old features. This can be frustrating if you are waiting for a certain bug fix or a new feature that is already available in the latest release.
bootstrap, run this command.
yarn add bootstrap jquery popper.js
This command will automatically install the latest
bootstrap package in the yarn registries and add its dependency entry and version in your
popper.js are libraries that
bootstrap depends on, especially in their
The JS And CSS Files
application.js should now reside in the
Of course, you can go ahead and change the configuration to your liking. However, keep in mind that
Rails promotes convention over configuration. This implies that as much as possible, methodologies and practices should follow a certain default unless absolutely necessary. this has multiple advantages. My favorite one is the portability of code among fellow
Rails developers. Developers can easily understand the flow of logic and where to find bugs because they are where are expected to be. This cuts down the development time and cost greatly.
application.js file should look like this:
Line 1 to 4 are the default files already present in the file.
Line 5 adds the
Line 8 adds your custom stylesheet. Now, this file can be placed anywhere. In the above example, the path is relative to where the
application.js file is. Hence, the file is placed in
Next, we import the
Bootstrap stylesheet files in the main stylesheet file.
Note that we are importing files from the
node_modules folder, and not a
bootstrap folder placed in the relative path of the current directory of the main stylesheet file.
Also, you do not need the
~ in front of the path to signify that it is from the
node_modules folder like you would usually do for other non-Rails project using
webpack. The tilde alias in webpack is a default
webpack configuration that will resolve to the
node_modules folder. While it will still work here, it is not required as the
node_modules folder is already configured as part of the search paths that
webpack will look for when resolving the modules.
Now, you may be wondering how to the
Bootstrap libraries will work without importing any of its dependencies, that are
Jquery. We will come to that in a minute. Before that, let’s look at the views.
application.html.erb layout so that the
Bootstrap framework can be accessed in all pages. These lines of code are added in the <code><head></code> section of the layout template.
There are a number of things that are different from the old implementation.
Line 1 adds the compiled stylesheets path that
webpacker will compile. Note that this only happens if the
extract_css option is set to
true in the
webpacker.yml file. More about this later.
As you can see, there is no more
stylesheet_include_tag. In the past, this helper method will get files from the
Here what’s happening.
Webpack will look at
application.js and find the stylesheet files that are included in it. Then, using a combination of
Webpack will know how to compile and translate the
scss syntax, the url paths of assets used etc. into a
css file that the browser can read and implement its styling.
Webpack loaders are already included by the
Webpacker and its configurations set up. However, there are many loaders out there that are not included by default. They tend to be less used conventionally and will require manual intervention from your side.
One example is using ruby code inside your
rails-erb-loader that will “teach”
Webpack to understand the
erb syntax. The implementation involves a number of steps, one of which is to append this loader to the
environment.js configuration file. Thankfully, for this case, the community has deemed it a pretty common use case that there is, at least, a rake task that comes together with the
Webpacker gem to set this up easily.
The compilation process mentioned above, however, is not applied in the development environment by default. This is due to the
extract_css settings in the
webpacker.yml page. More about this and its implications in a bit.
stylesheet_include_tag still works for assets you place in the
app/assets folder. However, while that is true, as
Rails moves away from the old
Sprockets and assets pipeline convention, this is expected to become deprecated in the future.
The Webpacker Configuration File
Lastly, we need to add the dependencies of
bootstrap. This takes place in the
As you can see, we are utilising the
ProvidePlugin function of
This is just an example of how we can import files with
Rails. And in this case, especially for
The extract_css Option
There is one last point I would like to touch on. That is the
extract_css option in the
When set to
stylesheet_pack_tag helper method as mentioned earlier.
In comparison, when set to
In development mode, the conventional setting for the
extract_css option is
false, and this has quite a significant implication on how the website will behave.
One, there might be a flash of unstyled content (FOUC) when the page loads because the
css files which are blocking resources that will pause the rendering of the website until the file has been downloaded, the
css blob and insert it into the html source code. If the web page loads before this occurs, FOUC will occur.
stylesheet_pack_tag is not needed in the development environment using the default setting. Things will seem to work fine only until it is pushed into the production environment where the
extract_css option is set to
true. So make sure to include it the view even if it seems to work fine without it in development.
At this point of time, the application should be running with
Bootstrap in place. Do test out how it will differ in the production environment as compared to development.