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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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.