Skip to main content

How do I install bootstrap-v4 via yarn?

CSS • Asked by Drilon Buzuku

Hey Guys,

I tried to install bootstrap4 via yarn. And I tried it like this:

  1. yarn add [email protected]
  2. rails webpacker:compile
  3. add the line: import 'bootstrap/dist/css/bootstrap' (also tried [email protected] instead of simply writing bootstrap) in javascript/pack/application.js
  4. add the line: *= require bootstrap/dist/css/bootstrap to application.css
  5. add the line: <%= javascript_pack_tag 'application' %> to layouts/application.html.erb

But it didn't work out. How do I install bootstrap via yarn? Is it recommended to install bootstrap via yarn? Or is it a better practice to install bootstrap through the bootstrap gem?

Cheers,

Drilon


Hi Drilon,

Sorry nobody got back to you. I had some trouble doing this myself a while back. As Chris informed me, the webpacker and the asset pipeline are two totally seperate things with similar goals. You don't use them together.

The webpacker documentation may be the best place to look for tutorials. But as a TL;DR I would do the following:

  1. Add bootstrap through yarn: yarn add [email protected]
  2. Create a file to be transpiled by webpacker: app/javascript/bootstrap.sass (or app.sass... whichever name suits you best.)
  3. Within bootstrap.sass import your newly added boostrap library: @import '~bootstrap/dist/css/bootstrap'
  4. In the head of your app/views/layouts/application.html.erb add <%= stylesheet_pack_tag 'bootstrap' %>.
  5. Run rails s in one terminal window tab and ./bin/webpack-dev-server in the other so webpacker can compile your assets and serve them in your app.

Note that in the webpacker documentation you can import the bootstrap sass using the javascript pack tag, but I don't mix my scripts and stylesheets. Personal preference.


Just in case you need an example
I created a sample "hello-world" app following Peter instructions, the only diference is i'm using mini.css instead of bootstrap. It worked like a charm:
https://github.com/amalrik/test-webpack


Nice! I think it's worth noting now that with webpacker 3.0 you no longer need to run ./bin/webpack-dev-server unless you want features like hot module reloading.

Running rails s will also compile webpack assets.


Importing css is deprecated, so the line
@import '~bootstrap/dist/css/bootstrap'
 leads to a warning, and apparently in most recent versions already is an error. See https://github.com/sass/node-sass/issues/2362 .

How should bootstrap be included instead of using @import ?

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.