How do I install bootstrap-v4 via yarn?

Hey Guys,

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

1. yarn add bootstrap@4.0.0-alpha.6
2. rails webpacker:compile
3. add the line: import 'bootstrap/dist/css/bootstrap' (also tried bootstrap@4.0.0-alpha.6 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 bootstrap@4.0.0-alpha.6
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.

@import '~bootstrap/dist/css/bootstrap'