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.
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.
来源：https://stackoverflow.com/questions/20292459/css-available-but-not-rendering-when-push-to-production-rails-app