CODEWITHSUNDEEP
htmlcssruby-on-railsrubyruby-on-rails-3
user_90
user_90

Reputation: 25

Ruby on Rails CSS not loading via assets pipeline

I have searched the web for a solution to this problem and haven't found a solution that works albeit I did find similar problems.

So, I am new to RoR development and this is my first app. I am try to create a page and have so far managed to route to my first page using a controller with an action. The routing works fine.

The problem is with the CSS, I have placed the css in a separate .css file within assets/stylesheets/main.css.

Here it is:

h1 {
   font-size: 100px;
}

I link to all stylesheets using the default method provided by Rails, it is placed in my application.html.erb file like so:

.
.
.
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track': 'reload' %>
.
.
.

From my research, I have learnt that the assets pipeline allows you to place all of your CSS in the assets/stylesheet directory (and JS in the JS directory etc.). Rails should then use these CSS files automatically.

But this isn't working for me as the index.html.erb file stays the same as it would without the main.css when I run the app.

Any help would be appreciated.

Let me know if you require further information.

Thank you.

P.S. Using Rails 5.0.5 and ruby 2.2.6p396 (2016-11-15 revision 56800) [i386-mingw32] on Windows 10

P.P.S. I should note that <%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track': 'reload' %> was previously <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>. I had to use default as using application threw an exception (ExecJS::ProgramError)

Upvotes: 0

Views: 1605

Answers (2)

user_90
user_90

Reputation: 25

Turns out that the problem was with the installation of Node.js.

  1. Visit https://nodejs.org/en/download/
  2. Download and install current version
  3. Restart computer after installation completes
  4. Re run server, the problem should be gone and the app should run without any modifications. i.e. changing from application to default when specifying CSS files.

Visit https://www.youtube.com/watch?v=l04kFL3pnEk for a step by step video tutorial.

Upvotes: 1

max
max

Reputation: 102423

stylesheet_link_tag(*sources)

Returns a stylesheet link tag for the sources specified as arguments. If you don't specify an extension, .css will be appended automatically. You can modify the link attributes by passing a hash as the last argument.
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-stylesheet_link_tag

To link to app/assets/stylesheets/main.css you need to use <%= stylesheet_link_tag 'main', media: 'all', 'data-turbolinks-track': 'reload' %>

Upvotes: 0

Related Questions