bazzel/README.md

Last active May 26, 2021 04:20

Star (34) You must be signed in to star a gist
Fork (9) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/bazzel/2c64e2e5804077f9a61938a93ed54823.js"></script>
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!

osheroff commented Oct 12, 2019

import '~bootstrap/scss/bootstrap';

should read

@import '~bootstrap/scss/bootstrap';

instead. Thanks for the guide!

Author

maxgronlund commented Oct 22, 2019

Thanks for the guide.

I had to rename 'style.css' to 'style.scss'

a-ta-ta commented Nov 8, 2019

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
on line 16:1 of app/assets/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

Author

bazzel commented Nov 9, 2019 •

edited

Loading

@a-ta-ta You should put this line in app/javascript/packs/styles.scss, not in app/assets/stylesheets/application.scss.

renatopanda commented Dec 26, 2019

Not sure if it's the best solution but I was getting Uncaught ReferenceError: $ is not defined when trying to use $(...) in a view and ended up solving it by setting $ as global (together with jQuery right after importing:

# app/javascript/packs/application.js
import $ from 'jquery';
global.$ = $;
global.jQuery = $;
...

bb commented Jan 5, 2020 •

edited

Loading

@renatopanda: you may need to configure expose-loader for exposing globals automatically.

Author

bazzel commented Jan 6, 2020

@renatopanda: I realized I forgot the snippet to configure the expose-loader code needed to make jQuery globally available. I've updated the gist.

la-ruby commented Feb 1, 2020

I can script it with bash 👍

belgoros commented Feb 21, 2020 •

edited

Loading

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...

dodacode commented Mar 31, 2020

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.

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 commented Apr 1, 2020

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

Author

bazzel commented Apr 1, 2020 •

edited

Loading

(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 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 commented Apr 26, 2020

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 commented Aug 25, 2020 •

edited

Loading

Thanks for sharing. I have few considerations @bazzel

looks like bootstrap is including jquery, I guess it will work only by installing it with yarn.
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

bazzel/README.md

osheroff commented Oct 12, 2019

Uh oh!

bazzel commented Oct 16, 2019

Uh oh!

maxgronlund commented Oct 22, 2019

Uh oh!

a-ta-ta commented Nov 8, 2019

Uh oh!

bazzel commented Nov 9, 2019 •

edited

Loading

Uh oh!

renatopanda commented Dec 26, 2019

Uh oh!

bb commented Jan 5, 2020 •

edited

Loading

Uh oh!

bazzel commented Jan 6, 2020

Uh oh!

la-ruby commented Feb 1, 2020

Uh oh!

belgoros commented Feb 21, 2020 •

edited

Loading

Uh oh!

dodacode commented Mar 31, 2020

Uh oh!

bazzel commented Mar 31, 2020

Uh oh!

dennym commented Apr 1, 2020

Uh oh!

bazzel commented Apr 1, 2020 •

edited

Loading

Uh oh!

dennym commented Apr 1, 2020

Uh oh!

viktorianer commented Apr 26, 2020

Uh oh!

radubogdan commented Aug 25, 2020 •

edited

Loading

Uh oh!

bazzel/README.md

osheroff commented Oct 12, 2019

Uh oh!

bazzel commented Oct 16, 2019

Uh oh!

maxgronlund commented Oct 22, 2019

Uh oh!

a-ta-ta commented Nov 8, 2019

Uh oh!

bazzel commented Nov 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

renatopanda commented Dec 26, 2019

Uh oh!

bb commented Jan 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bazzel commented Jan 6, 2020

Uh oh!

la-ruby commented Feb 1, 2020

Uh oh!

belgoros commented Feb 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dodacode commented Mar 31, 2020

Uh oh!

bazzel commented Mar 31, 2020

Uh oh!

dennym commented Apr 1, 2020

Uh oh!

bazzel commented Apr 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dennym commented Apr 1, 2020

Uh oh!

viktorianer commented Apr 26, 2020

Uh oh!

radubogdan commented Aug 25, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bazzel commented Nov 9, 2019 •

edited

Loading

bb commented Jan 5, 2020 •

edited

Loading

belgoros commented Feb 21, 2020 •

edited

Loading

bazzel commented Apr 1, 2020 •

edited

Loading

radubogdan commented Aug 25, 2020 •

edited

Loading