Rails - Understanding Application.Js and Application.CSS

Rails - Understanding application.js and application.css

To understand it, you have to look at Sprockets, which is used for compiling and serving web assets.

You can find these files using gem which. Here is an example with bootstrap-sass:

~ gem which bootstrap-sass
/Users/andr/.rbenv/versions/1.9.3-p194/lib/ruby/gems/1.9.1/gems/bootstrap-sass-2.3.0.1/lib/bootstrap-sass.rb

The explanation of @import 'bootstrap': https://github.com/thomas-mcdonald/bootstrap-sass#css and there is an open issue with comments.

Rails 3.2.8 Application.js and Application.css are not working as expcted

It should be ruby version issue. You would be using ruby 2.0.0, try to downgrade to 1.9.2 or 1.9.3. Hope it will work.

where to put the external css and js in rails

Asset Pipeline

What you're referring to is something called the asset pipeline - the app/assets folder is where you store all the "dependent" files for your HTML -- css / js / images etc.

The asset pipeline is very simple -

The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass and ERB.

It's function is to provide you with a way to "compile" your CSS/JS into condensed (minified) files, which you can call in your front-end HTML. The ultimate aim is to make your "assets" as small as possible, so your page loads fastest.

--

In your case, you'll want to look up Sprockets Manifest Directives --

#app/assets/stylesheets/application.css
/*
   *= require self
   *= require_tree .
*/

The above will take every CSS file in app/assets/stylesheets and concatenate them into a single application.css file:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>

---

So to answer your question directly, you only need to store external stylesheets in your app/assets/stylesheets folder.

If you have a "real" external stylesheet (hosted by Google or something), you'll want to include it in your layout as follows:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %>

How do I use CSS with a ruby on rails application?

Put the CSS files in public/stylesheets and then use:

<%= stylesheet_link_tag "filename" %>

to link to the stylesheet in your layouts or erb files in your views.

Similarly you put images in public/images and javascript files in public/javascripts.

application.css asset pipeline

Just leave the original settings of the application.css and let the asset pipeline do the job:

*= require_self
*= require_tree .

And in your layout you should be able to load the compiled application.css file:

<%= stylesheet_link_tag "application", :media => "all" %>

I disagree with Tam's answer. You shouldn't have to put your files anywhere other then the default locations in development. You can easily mess up your stuff, and unless you need requireJS-like assets management, you can benefit a lot from the asset pipeline.

Here is everything you need to know about the asset pipeline:
http://guides.rubyonrails.org/asset_pipeline.html

---

Related Topics