How to @import bootstrap in rails assets/stylesheets folder

UX
1

Hello justin,

i really just started learning webpack. and i use rails. i want to use webpack to managed my javascript library.

so i found your justin808/react-webpack-rails-tutorial.

follow the guide, install bootstrap-sass-loader, and add entry point and add loader.

it look like bootstrap javascript was loaded. but i don’t know how to import scss. in origin rails project, i place scss file in app/assets/stylesheets folder. but webpack will package all the files in app/assets/javascripts/client

could you tell me how to @import bootstrap in origin rails project’s scss file?

i can load it like this: ../../node_modules/bootstrap-sass/assets/bootstrap/, looks so bad. and not right, yes?

if i do this the glyphs cannot be loaded. and i got some warning

Failed to decode downloaded font: http://localhost:5000/a/448c34a56d699c29117adc64c43affeb.woff2
Failed to decode downloaded font: http://localhost:5000/a/fa2772327f55d8198301fdb8bcfc8158.woff
Failed to decode downloaded font: http://localhost:5000/a/e18bbf611f2a2e43afc071aa2f4e1512.ttf

and what i want is remove jquery-rails and bootstrap-sass from Gemfile.
so , what can i do?

thanks.

2
  1. It’s pretty simple to to have jQuery managed by Webpack and to then expose it to Rails. I don’t remember off of the top of my head, but when I played around with the webpack config settings, it was no problem. The only issue is that you need to make sure that you load the rails_ujs code in application.js after your webpack file.
  2. I recommend using the bootstrap-sass gem. The npm module for bootstrap-sass actually uses the gem. I experimented quite a bit with having Rails load the sass assets that were compiled with webpack and I came to the conclusion that there was lots of additional complexity and no real advantage. However, I do like allow the hot reload server to load the sass, and that works great for testing.

Conclusion

and what i want is remove jquery-rails and bootstrap-sass from Gemfile.
so , what can i do?

Answer: Don’t do that. We experimented a bunch and and the simplest and best is in the tutorial.

3

oh, your means use something in npm and use something in gem?
it feel awful, right.

4

@geminiyellow the npm bootstrap-sass refers to the same github repo that used by the gem, FYI.

5

@justin yes, you’r right. it is the same github repo.
i know lots of lib have rails version.
but…simple is better, right?
maybe gem is simpler than npm.

6

@geminiyellow: I experimented quite a bit with this. Stick to the Rails asset pipeline for handling sass and other image/font assets.