How do I add CSS to Ruby On Rails?

Question

I can't figure out how to add CSS to my Ruby On Rails code.

This is my index.html.erb file where I attempt to include the stylesheet.

<!DOCTYPE html>

<html>

    <head>
        <%= stylesheet_link_tag "app\assets\stylesheets\welcome.scss" %>
    </head>

    <body>
        <h1>Welcome To Dot</h1>
        <p>Make Life Easier</p>
    </body>
</html>

Inside of the assets\stylesheets folder I have a welcome.scss file:

h1{
    font-size:30px;
    font-weight: bold;
    font-family: fantasy;
    color: darkgoldenrod;
    text-align: left;
}

The body shows up but does not have any styling.

application.html:

<!DOCTYPE html>
<html>
<head>
  <title>Dot</title>
  <%= stylesheet_link_tag    'default', media: 'all', 'data-turbolinks-track'       => true %>
  <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

When leave it as default, I do not see any CSS in my code. When I change it to application, i get the error.

Possible duplicate of [How do I use CSS with a ruby on rails application?](http://stackoverflow.com/questions/804961/how-do-i-use-css-with-a-ruby-on-rails-application) — Mahabub Islam Prio, Dec 20 '15 at 19:22
Now I am getting: ExecJS::ProgramError in Welcome#index. When I search for this problem it tells me to change my application.html file and make the parameters 'default' but I've already done that. — Mike, Dec 20 '15 at 19:30
do you have `application` files in your app? `application.html.erb` etc. — Igor Ivancha, Dec 20 '15 at 19:53
@IgorIvancha Yes I have an application file. I'll add it to the question — Mike, Dec 20 '15 at 22:01

score 3 · Answer 1 · answered Dec 20 '15 at 19:18

3

You should write:

<%= stylesheet_link_tag "welcome" %>

Please consider going through the Rails guides on the Asset pipeline that elaborate on using asset helpers to include assets in HTML page.

answered Dec 20 '15 at 19:18

lorefnon

12,875
6
61
93

Now I am getting: ExecJS::ProgramError in Welcome#index. When I search for this problem it tells me to change my application.html file and make the parameters 'default' but I've already done that. – Mike Dec 20 '15 at 19:22
Please post a full backtrace. – lorefnon Dec 21 '15 at 06:24

score 0 · Answer 2 · answered Dec 20 '15 at 19:56

0

You must have <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> to the layouts/application.html.erb file. You don't have to put to any other file css tags. Yield do the job. application.html.erb loaded to any view of your app.

answered Dec 20 '15 at 19:56

Ruby Doggy

109
5

When I changed 'default' to 'application' I get ExecJS::ProgramError in Welcome#index – Mike Dec 20 '15 at 20:35
Do you know what I should do? – Mike Dec 20 '15 at 22:15

score 0 · Answer 3 · edited Dec 21 '15 at 08:33

You need to delete your stylesheet tag on your index.html.erb and in your application.html.erb Have a stylesheet link tag like this : <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>. -- if that doesn't help , you should check what is written after application/default <filename>.css Scss must not be written for now.. <filename>.scss That worked for me

How do I add CSS to Ruby On Rails?

3 Answers3