Skip to content

Instantly share code, notes, and snippets.

@bazzel

bazzel/README.md

Last active May 26, 2021 04:20
Show Gist options
  • Save bazzel/2c64e2e5804077f9a61938a93ed54823 to your computer and use it in GitHub Desktop.
Save bazzel/2c64e2e5804077f9a61938a93ed54823 to your computer and use it in GitHub Desktop.
Download ZIP
Rails 6 and Bootstrap 4
Raw
README.md

This blogpost shows how to setup Rails 6 with Bootstrap 4.

This snippet shows a somehow different and less customized approach.

$ rails new rails6-bootstrap4
$ bundle --binstubs
$ yarn add bootstrap jquery popper.js expose-loader

// config/webpack/environment.js

// Make $ available on the window object
// for SJR views and jQuery plugins
// that may expect `$` to be globally available.
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [
    {
      loader: 'expose-loader',
      options: 'jQuery',
    },
    {
      loader: 'expose-loader',
      options: '$',
    },
  ],
});
// app/javascript/packs/application.js

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});
// app/javascript/packs/styles.scss

@import '~bootstrap/scss/bootstrap';
# config/webpacker.yml

...
extract_css: true
# app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<body>
  <div class='container'>
    <%= yield %>
  </div>
</body>
$ bin/webpack-dev-server
$ bin/rails s

I recently found this article that seems to do the same, but a bit more explanation. Worth reading!

@belgoros
Copy link

belgoros commented Feb 21, 2020 •
edited

Putting a stylesheet file in app/javascript/... folder looks a little bit weird for me... even if we consider that webpack is a JS library...

@dodafish
Copy link

I think app/javascript/packs/application.js is missing the line import './styles';

I had to add this. Otherwise, there was no CSS added to the page.

@bazzel
Copy link
Author

bazzel commented Mar 31, 2020

@FrischerHering For me it was sufficient to create app/javascript/packs/styles.scss and use it in the layout file by calling stylesheet_pack_tag 'styles'.

@dennym
Copy link

dennym commented Apr 1, 2020

Just out of curiosity... from where would you serve custom css with this setup? Also from app/javascript/packs?

@bazzel
Copy link
Author

bazzel commented Apr 1, 2020 •
edited

(updated comment)

@dennym I have several SCSS-file in the packs folder (can be stored in subfolders of course). Given you have 1 'main' CSS file styles.scss you can import other files in here as you would normally do:

// app/javascript/packs/styles.scss
@import 'base'
@import 'modules'

// app/javascript/packs/_base.scss
body {
  ...
}

// app/javascript/packs/_modules.scss
@import 'modules/navbar'
@import 'modules/search'
...

Then in my layout file I can use stylesheet_pack_tag 'styles'.

@dennym
Copy link

dennym commented Apr 1, 2020

@bazzel Yeah thats what I thought. It just feels a bit off context when still having the app/assets/stylesheets of rails. Basically its decision between what is served with sprockets (which is still serving everything in app/assets I guess) and webpack. Where would anyone stop... images / fonts?

@viktorianer
Copy link

What about Popper?

I found following guide really helpful and it also takes into account to import Popper for Bootstrap 4.
https://www.timdisab.com/installing-bootstrap-4-on-rails-6/

PS: thx for nice and short installation guide @bazzel

@radubogdan
Copy link

radubogdan commented Aug 25, 2020 •
edited

Thanks for sharing. I have few considerations @bazzel

  1. looks like bootstrap is including jquery, I guess it will work only by installing it with yarn.
  2. if expose must be used, they changed the API so new code should be something like:
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  loader: 'expose-loader',
  options: {
    exposes: ['$', 'jQuery'],
  },
});

Regards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment