Where Do You Put CSS Files in a Rails App Directory

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

for Rails 2.x : public/stylesheets

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 - creating a folder under stylesheets

Rename your application.css to application.css.scss

And then application.css.scss file has to be like below.

@import "components/*";
@import "page-specific";

How to correctly write a path to stylesheets in application layout?

As mentioned the preferred way of including assets into a rails application is to use the Asset Pipeline. In the event you need to include an asset that lives outside of the default include paths setup by Rails (in your case css/bootstrap.min.css) you can add a custom path to the application.

By adding the following to your config/initializers/assets.rb:

config.assets.paths << Rails.root.join("css")

Rails will now look for assets in /css when using the javascript_include_tag or the stylesheet_link_tag within your layout/application.html.erb. You will also need to tell rails the name of the asset to precompile since you are using a filename other than application.js or application.css. To do this add the following to the config/initializers/assets.rb file:

Rails.application.config.assets.precompile += %w( bootstrap.min.css )

In your layout/application.html.erb you will now be able to tell rails to load your stylesheet.

<%= stylesheet_link_tag 'bootstrap.min', media: 'all' %>

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

Ruby on Rails: How can I add a css file with rails project?

Rails is likely consolidating all your css files into one that it is calling assets/all.css

Consider using the free plug-ins firebug + firepath to further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.

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.

---

Related Topics