Rails 5: CSS will not link to html

Question

I'm new to rails and trying to link main.css.scss to index.html.erb file in views/main.

My css file is located in app/assets/stylesheets. This is default, I did not change anything.

So in my index.html.erb file I added the following:

<%= stylesheet_link_tag "main" %>

This throwed an error which advised me to include ".css" at the end of "main". I added ".css" and ".css.scss" to the end of main. The main page loads, but without the css file.

What is the correct way to link css in rails 5?

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

Read the api docs here. It will help you to understand how you can link css in rails.

Also take a look at Samuel's answer. He explained it really well.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 21 '16 at 06:14

Sinscary

652
12
32

score 1 · Answer 2 · answered Jul 21 '16 at 06:45

It's very simple. If you don't want to use default application.css and application.js, then create new files, like in your case main:

app/assets/stylesheets/main.scss
app/assets/javascripts/main.js

Then in your layout include those files:

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

And add those files to assets.rb:

Rails.application.config.assets.precompile += %w( main.scss main.js)

And restart the server.

Rails 5: CSS will not link to html

2 Answers2