Using jQuery, Bootstrap and Sass in my Rails project

Question

I have installed all necessary gems to have jQuery, Sass and Bootstrap Sass in my rails project. However, I do not know how to start making use of them. I have also included all Bootstrap files in the assets pipeline and modified the files to import/require those files.

This is my application.css.scss:

@import "_bootstrap-sprockets";
@import "_bootstrap";

And this is my application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

Now I have generated a controller and tried to use jQuery in it, straight without doing anything special, like this:

<script type="text/javascript">$(function() { alert('Hello') })</script>

But apparently, I am doing something wrong. Do I need to do some sort of inclusion of jQuery/Bootstrap/Stylesheets in my erb files?

As said, I'm a novice in Rails and I'm looking to get started. Answers would be highly appreciated.

You do not have to include jQuery/Bootstrap/Stylesheets in your erb files. Those will be automatically included by the asset pipeline. — mc9
– mc9, Commented Nov 24, 2014 at 21:28
@StanislavMekhonoshin I cannot start writing jQuery right away in my erb files. Do I need to include jQuery in the erb files somehow? — aborted
– aborted, Commented Nov 24, 2014 at 21:31

celly · Accepted Answer · 2014-11-25 17:34:31Z

I am assuming you added gem 'bootstrap-sass', '~> 3.2.0.0' (at the time of this writing) to your Gemfile, ran bundle install in terminal and then restarted the rails server.

The rails way of doing things would then have you create a new file in your stylesheets asset pipeline app\assets\stylesheets and call it custom.css.scss (your choice of filename is up to you, but the file extension must end in css.scss).

Add the following contents to your custom.css.scss file:

@import "bootstrap-sprockets";
@import "bootstrap";

Add the following contents to your application.css file:

/*
*= require_tree .
*= require_self
*/

*= require_tree . adds everything in the stylesheet directory and *= require_self will include any lines of code you put in the application.css after the close of the requirements */.

Next, you will also need to add bootstrap javascript. In your application.js file, you need to include bootstrap in a specific order and using the proper names. Reorder the file to look like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Assuming that you have already included the following lines at the top of your application layout

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

you should be good to go.

Collectives™ on Stack Overflow

Using jQuery, Bootstrap and Sass in my Rails project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related