Electro Electro - 4 months ago 19
CSS Question

CSS is not loading in Rails 4.2.5 | development environment

Gone through some of the solutions and included the below in my

development.rb
file

config.assets.precompile = true
config.assets.precompile = ['*.js', '*.css', '*.css.erb']


Still facing the same issue. Can anybody help here?

Here is the snapshot of
application.css
file

/*
*= require_tree .
*= require_self
*/


I am trying to load the css in
register.html.erb
whose contents are

<h1>Register#register</h1>
<p>Find me in app/views/register/register.html.erb</p>


and the style sheet I am trying to load is
style_pub.css


h1 {
color : green;
}


Console log error:

Started GET "/stylesheets/assets/stylesheets/application.css" for ::1 at 2016-08-06 17:17:43 +0530

ActionController::RoutingError (No route matches [GET] "/stylesheets/assets/stylesheets/application.css"):
actionpack (4.2.5.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
web-console (2.3.0) lib/web_console/middleware.rb:28:in `block in call'
web-console (2.3.0) lib/web_console/middleware.rb:18:in `catch'
web-console (2.3.0) lib/web_console/middleware.rb:18:in `call'
actionpack (4.2.5.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
railties (4.2.5.1) lib/rails/rack/logger.rb:38:in `call_app'
railties (4.2.5.1) lib/rails/rack/logger.rb:20


application.html.erb
file:

<!DOCTYPE html>
<html>
<head>
<title>CssTest</title>
<%= stylesheet_link_tag 'assets/stylesheets/application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'assets/javascripts/application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>


New error log after the suggested change:

Started GET "/register/register" for ::1 at 2016-08-06 17:46:41 +0530
Processing by RegisterController#register as HTML
Rendered register/register.html.erb within layouts/application (0.0ms)
Completed 500 Internal Server Error in 384ms (ActiveRecord: 0.0ms)

ActionView::Template::Error (TypeError: Object doesn't support this property or method):
2: <html>
3: <head>
4: <title>CssTest</title>
5: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
6: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7: <%= csrf_meta_tags %>
8: </head>
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb___978862768_58522776'

Answer

Move your css files from public directory to app/assets/stylesheets/ directory, it will resolved your problem.

By *= require_tree . line of code in application.css includes all css files within app/assets/stylesheets/ directory.

replace your below lines from

<%= stylesheet_link_tag    'assets/stylesheets/application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'assets/javascripts/application', 'data-turbolinks-track' => true %>

to

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

it will works fine