Ruby on rails: stylesheet in assets doesn't works

Question

I have always been in trouble with my assets pipeline, even after reading http://guides.rubyonrails.org/asset_pipeline.html I still run into trouble.

My css doesn't render when I load my page in development, it looks like the css is not taken into account, because if i put this css into <script></script> in the header of my page home.html.erb it works perfectly.

I have this stylesheet in app/assets/stylesheets/bootstrap.css.scss

bootstrap.css.scss

/* BOOSTRAP CSS */
/* /BOOSTRAP CSS */

.form-group {
  width: 250px;
  font-size: 10px;
  opacity: 1;
 } 


.panel {
    width:300px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    z-index: 10000;

}

.btn-default {
    border: 1px solid #28c3ab;
    color: #1abc9c;
    background-color: #f1c40f;
}




.jumbotron {
    background-color:#ecf0f1;
    color:#1abc9c;
} 

.btn-default {
    color: #1abc9c;
    background-color: #f1c40f;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #1abc9c;
    background-color: #3498db;
}


.btn-primary {
    border: 1px solid #28c3ab;
    color: #f1c40f;
    background-color: #1abc9c;
}

.btn-primary:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #f1c40f;
    background-color: #3498db;
}

Here is my application.css in app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into **application.css**, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require 'masonry/transitions'
 *= require_tree
 *= require font-awesome 
 *= require bootstrap
 *= require magnific-popup
 */

I am not sure about what's going wrong, I tried to precompile the assets, still not working, what could I be missing?

I have the link to my stylesheets in my layouts, app/views/layouts/application.html.erb

    <%= stylesheet_link_tag "application", media: "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>

Answer 1

When you precompile your assets for production, make sure your development environment isn't also using those assets. So inspect your html and make sure you can see each css file and not just application.css

If you do find that you're using your precompiled assets, run rake assets:clean and then your development environment will use the right css files.

Answer 2

I was having a similar problem with my style sheets not loading. but this was happening because I had change <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

line of code to

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

in the application.html.erb file in the earlier stages of building my application... But I changed it back to

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> the style sheets loaded.

the application.html.erb is located in the view/layout/ folder in the rails application directory.