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

Ruby on-RailsCssRuby

Ruby on-Rails Problem Overview


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.

Ruby on-Rails Solutions


Solution 1 - Ruby on-Rails

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.

Solution 2 - Ruby on-Rails

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

Solution 3 - Ruby on-Rails

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.

Solution 4 - Ruby on-Rails

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.

Solution 5 - Ruby on-Rails

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

Solution 6 - Ruby on-Rails

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

Solution 7 - Ruby on-Rails

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

Solution 8 - Ruby on-Rails

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStefan KendallView Question on Stackoverflow
Solution 1 - Ruby on-RailsKyle BoonView Answer on Stackoverflow
Solution 2 - Ruby on-Railssameera207View Answer on Stackoverflow
Solution 3 - Ruby on-RailsSparta Newton RobertView Answer on Stackoverflow
Solution 4 - Ruby on-RailsJim ChertkovView Answer on Stackoverflow
Solution 5 - Ruby on-RailsCodeJohnnyView Answer on Stackoverflow
Solution 6 - Ruby on-RailsRaphometView Answer on Stackoverflow
Solution 7 - Ruby on-RailsswichesView Answer on Stackoverflow
Solution 8 - Ruby on-RailsChris BunchView Answer on Stackoverflow