69

How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.

What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.

tckmn
  • 57,719
  • 27
  • 114
  • 156
Stefan Kendall
  • 66,414
  • 68
  • 253
  • 406

8 Answers8

66

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.

Kyle Boon
  • 5,213
  • 6
  • 39
  • 50
  • there is no "public/stylesheets" where can I add my file? – hrishikeshp19 Mar 10 '12 at 03:48
  • 1
    Then you can create it add the public folder in the same directory as your app folder. Then add a stylesheets folder within the public folder. – PJT May 01 '12 at 13:55
  • The link tag needs to be in the head part of my document, correct? If I only need the style in one erb partial, is there a way I can conditionally add it when that partial is needed? Or is there a way I can add if the current route matches a specific one? – Julien Lamarche Dec 15 '21 at 15:54
  • @JulienLamarche tad bit late, but I would look into the `content_for` method. There is an example further down in section 3.5 Using Nested Layouts. https://guides.rubyonrails.org/layouts_and_rendering.html#using-the-content-for-method – Eduardo06sp Nov 27 '22 at 22:27
30

If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to 

app/assets/stylesheets

then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)

read more here about the asset pipeline

Mayur Shah
  • 3,344
  • 1
  • 22
  • 41
sameera207
  • 16,547
  • 19
  • 87
  • 152
16

Use the rails style sheet tag to link your main.css like this 

<%= stylesheet_link_tag "main" %>

Go to 

config/initializers/assets.rb

Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'

Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )

Restart your server.

Tunaki
  • 132,869
  • 46
  • 340
  • 423
Sparta Newton Robert
  • 161
  • 1
  • 2
14

I did the following...

  1. place your css file in the app/assets/stylesheets folder.
  2. Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)

I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.

Kick Buttowski
  • 6,709
  • 13
  • 37
  • 58
Jim Chertkov
  • 1,199
  • 12
  • 20
4

The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.

  • Place any new sheet .css (or other) in app/assets/stylesheets
  • Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.

You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1

CodeJohnny
  • 71
  • 1
  • 1
    Sorry to necropost, but you are just as guilty as I. However, this is not the case at all. If you want to utilize the asset pipeline, and you have properly linked your CSS file in your application.html.haml (or .erb) your server will throw an error, and tell you to add it to the precompile (config/initializers/assets.rb) sorta like so `Rails.application.config.assets.precompile += %w( custom.css )` – DotSlashCoding Dec 08 '16 at 19:18
3

With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.

swiches
  • 31
  • 1
2

To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.

Raphomet
  • 3,589
  • 1
  • 23
  • 12
0

Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.

Chris Bunch
  • 87,773
  • 37
  • 126
  • 127