CODEWITHSUNDEEP
javascriptcssruby-on-rails
Sid
Sid

Reputation: 5833

where to put the external css and js in rails

I am just starting in rails and loading external resources like css and js has been an issue for me. Reading in few places, i found out that, css should be placed in app/assets/stylesheets and js inside app/assets/javascripts. After doing this i called my css and js in my view file like

<%= stylesheet_link_tag "<<path to my css>>" %>

for css and

<%= javascript_include_tag "<<path to my js>>"  %>

and i included this line inside my config/initializers/assets.rb

Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]

but doing this gave me some sort of compilation error. But i am not sure whether its the correct way or not to load external resource.Where are the other place that i need to change in order to load css and js and the best practice to include external resources in rails in terms of performance as well.

Upvotes: 4

Views: 4311

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

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" %>

Upvotes: 4

Triveni Badgujar
Triveni Badgujar

Reputation: 941

Once you add your css and js in assests respective folder, you have to require those files in application.js and application.css and then you can include these two files in your html. Try following code:

application.css

//= require abc

application.js

//= require xyz

In your html:

<%= stylesheet_link_tag "application" %> 
<%= javascript_include_tag "application"  %>

Upvotes: 2

Related Questions