Search code examples
ruby-on-railsnginxunicorndigital-ocean

Can't load the stylesheet


I can't seem to get my rails project to see my style.css or style-responsive.css.

application.html.erb contains

 <!-- From ruby begin --> 
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

    <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
  <%= stylesheet_link_tag "style" %>                        <!-- From template   -->
  <%= stylesheet_link_tag "style.ie7" %>                    <!-- From template   -->
  <%= stylesheet_link_tag "style.responsive" %>             <!-- From template   -->
  <%= javascript_include_tag "script.js" %>                 <!-- From template   -->

  <% # javascript_include_tag 'defaults' %>


  <%= csrf_meta_tags %> <!--  cross-site request forgery protection parameter   -->

<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">

When I render the page, the text shows up but no graphics. I checked the server app/ folders and image, css and js files appear to be there.

I did a rake assets:precompile. From the image I attached, It seems that there is some styling working.

Assets.rb contains

 Rails.application. config.assets.precompile = ['*.js', '*.css', '*.css.erb']      #for Production
  Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif]        #for Production
  Rails.application.config.assets.precompile += %w(script.js)
  Rails.application.config.assets.precompile += %w(script.responsive.js)
  Rails.application.config.assets.precompile += %w( style.css )
  Rails.application.config.assets.precompile += %w( style.responsive.css )
  Rails.application.config.assets.precompile += %w( style.ie7.css )

Production.rb has

  # Apache or NGINX already handles this.
 config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  # config.serve_static_files = true

If I look in my production log, I see errors for style and style-responsive.css

I, [2016-08-02T23:26:31.129752 #12930]  INFO -- : Started GET "/style.responsive.css" for 108.16.108.174 at 2016-08-02 23:26:31 -0400
I, [2016-08-02T23:26:31.133345 #12921]  INFO -- : Started GET "/style.css" for 108.16.108.174 at 2016-08-02 23:26:31 -0400
F, [2016-08-02T23:26:31.200006 #12921] FATAL -- : 
ActionController::RoutingError (No route matches [GET] "/style.css"):
  actionpack (4.2.5.2) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.2.5.2) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'

I thought that digital ocean's ubuntu/rails would serve static assets 'out of the box'

This will be a low usage site so I can live with just getting rails to serve the static assets (I tried config.serve_static_files = true and that didn't seem to work)

I believe the better solution would be to ensure that NGINX is serving the static files but I'm not sure how to check that.

Also, if I look at the page source, I see the fingerprinted files. If I click on one of them, I see the css file.

 <!-- The following is added to connect the template to ruby --> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" media="screen" href="/assets/style-bf197dd0f531130964616a51129935da1e598a02a4875c978ba88a1150f8c83b.css" />                        <!-- From template   -->
  <link rel="stylesheet" media="screen" href="/assets/style.ie7-0f23e9b569741aa18fa91789e00826aaee0273a38bc82afb353167975630e750.css" />                    <!-- From template   -->
  <link rel="stylesheet" media="screen" href="/assets/style.responsive-8d9d7ff8e357d6e354b2c30b39e501b0911171f97f4618b2b6ae29d23ac20991.css" />             <!-- From template   -->
  <script src="/assets/script-f4f7e1cb97bf4be4d67e931693643a62b9c0fbd4250eb7e1a26a8c0cf555f4e3.js"></script>                 <!-- From template   -->
<!--  < %= javascript_include_tag "jquery.are-you-sure" %>    -->   <!-- Dirty form checker   -->

I THINK that the server is looking for the stylesheets in the following in application.html.erb. However, if I remove that block of code, I still don't get my images and I also don't see any fatal errors in my log. I'm not sure that the block below is necessary.

<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">

enter image description here


Solution

  • just go to your app/assets/stylesheets/application.css or .scss or .sass then include your stylesheet remove them from application.rb

    if you have aplication.css

    //=require style
    //=require style.responsive
    

    if you have aplication.sass

    @import 'style'
    @import 'style.responsive'
    

    if you have aplication.scss

    @import "style";
    @import "style.responsive";
    

    Now your problem must have been solved