Add External Style Sheet in Rails Project

add external style sheet in rails project

I'm just going to assume you're already using something like this in your layout:

stylesheet_link_tag 'application'

If you want to refer to an external stylesheet then all you need to do is pass in the url.

stylesheet_link_tag 'application', 'http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css'

If you want to include the actual files in your codebase:

app/assets/stylesheets is where you should place your main css files.

vendor/assets/stylesheets is where you should place the css files for any plugins that you might have.

It's the same for js files. For example your application.js would go in app/assets/javascripts and a jquery plugin like timeago.js would go in vendor/assets/javascripts.

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.

Rails 6: How to associate specific stylesheet and external js plugin to a layout

With Asset Pipeline:

1. Create a special.js file in the app/assets/javascripts folder.

2. Add JS files to special.js

   //= require monnom
   //= require mintymon
   

3. Create a special.css(.scss) file in the app/assets/stylesheets folder.

4. Add CSS files to special.css(.scss)

   @import "monnom";
   @import "mintymon";
   

5. If it doesn't work like this, add a custom path into config.assets.paths so the autoloader can find them

   // assets.rb
   config.assets.paths << Rails.root.join("vendor", "javascripts") // I think the folder name should be javascipts instead of javascript
   config.assets.paths << Rails.root.join("vendor", "stylesheets")
   

   Then restart rails server

   You can see a list of load paths. Use Rails.application.config.assets.paths command in rails c.

Not able to include external stylesheet in rails application

Your problem has the hallmarks of a Rails asset pipeline problem

1. Do you have an application.css.erb with something like this? It's created by default and serves as the backbone for the CSS aspect of the asset pipeline in rails.

/* ...
*= require_self
*= require_tree .
*/

2. Using the asset pipeline means that a call like "/stylesheets/style.css" would never be valid in production and should be avoided in code.

If you're seeing this problem in production, did you rake your assets to build the fingerprinted filenames?

The raked filenames are mangled to something like: /assets/style-4dd5b109ee3439da54f5bdfd78a80473.css, so you can see why using the filename "style.css" will not work.

# Rake assets for production
$bundle exec rake assets:precompile RAILS_ENV=production

Debug

To me step 1 is making sure your pipeline is setup to serve CSS assets. Until that works, your CSS will be broken. I would ask you to first check on the application.css.erb, to make sure your app includes your CSS tree in the pipeline. Then run the production rake, this will tell you what is happening with your CSS assets. If you post the output to your question, then we could see which, if any CSS is being included in your app.

Required reading for anyone doing Rails apps is the Asset Pipeline guide

Where do you put CSS files in a rails app directory?

for Rails 2.x : public/stylesheets

---

Related Topics