CODEWITHSUNDEEP
cssruby-on-railsnginxruby-on-rails-4passenger
user2384124
user2384124

Reputation:

CSS available but not rendering when push to production [Rails app]

For some strange reason I cannot get my Rails app to render the CSS files on the server when running in production mode. I am running a Passenger + Nginx setup.

When I hit the public URL, I can see the app. The problem is, no styles are being applied. When I use the Chrome dev tools to view the CSS being rendered, I see that the file is present on the server, with all the CSS in it.

However, if I look at a specific component, I see something strange:

a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}

Everything says "webkit...style". Or "user-agent". I've never seen that before?

Again, the CSS precompiled files are definitely on the server - I can access them. (assets/application-45fdaf.....css).

Here is the head of the template being rendered:

<head>
  <title>Walter - <%= content_for?(:title) ? yield(:title) : "CRM App" %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= csrf_meta_tag %>

  <!-- Stylesheets -->
  <%= stylesheet_link_tag 'application' %>

  <!-- Font Awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

  <!-- Apple icons -->
  <%= favicon_link_tag('apple-icon-57.png', rel: 'apple-touch-icon', type: 'image/png', size: "57x57") %>
  <%= favicon_link_tag('apple-icon-72.png', rel: 'apple-touch-icon', type: 'image/png', size: "72x72") %>
  <%= favicon_link_tag('apple-icon-114.png', rel: 'apple-touch-icon', type: 'image/png', size: "114x114") %>
  <%= favicon_link_tag('apple-icon-144.png', rel: 'apple-touch-icon', type: 'image/png', size: "144x144") %>

  <!-- Favicon -->
  <%= favicon_link_tag '/favicon.ico' %>
</head>

(I've tried setting static assets to true and false in production.rb, but it doesn't seem to matter).

It's like the app isn't looking within the public/assets folder for the CSS. What is even more strange is that the images render fine. And it does look like the app is looking in the right spot:

<link href="/assets/application-f0659345b965e7ce36fb30edf04896c6.css" media="screen" rel="stylesheet">

Any idea what is going on here?

Thanks.

Update

When using <%= stylesheet_link_tag 'application' %> in production mode, something is causing this to return the stylesheet as text/plain instead of text/css.

Why is this happening?

Fixed

Apparently you definitely need to include the mime.types file is the nginx.conf. I may have commented it out at some point, or documentation just needs to get better. Either way, this fixed it. Without that line included, it can't translate CSS files.

Upvotes: 4

Views: 767

Answers (1)

davidfurber
davidfurber

Reputation: 5520

Is the production server returning the css file with content-type text/css or application/octet-stream? The latter is apparently a common mistake but won't render in chrome.

Upvotes: 1

Related Questions