CSS可用,但推送到生产环境时不呈现[Rails应用] [英] CSS available but not rendering when push to production [Rails app]

查看:62
本文介绍了CSS可用,但推送到生产环境时不呈现[Rails应用]的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

出于某些奇怪的原因,当我在生产模式下运行时,我无法使用Rails应用程序在服务器上呈现CSS文件.我正在运行乘客+ Nginx"设置.

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.

当我点击公共URL时,我可以看到该应用程序.问题是,没有样式被应用.当我使用Chrome开发工具查看正在渲染的CSS时,我看到文件存在于服务器中,其中包含所有CSS.

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;
}

一切都说"webkit ...样式".或用户代理".我以前从未见过吗?

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

同样,CSS预编译文件肯定在服务器上-我可以访问它们. (assets/application-45fdaf ..... css).

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>

(我曾尝试在production.rb中将静态资产设置为true和false,但这似乎无关紧要).

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

就好像该应用程序不在CSS的public/assets文件夹中查找一样.更奇怪的是图像渲染良好.而且确实看起来该应用程序在正确的位置:

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">

有什么想法吗?

谢谢.

更新

在生产模式下使用<%= stylesheet_link_tag 'application' %>时,由于某种原因,这导致样式表以文本/纯文本而不是文本/css的形式返回.

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

为什么会这样?

已修复

显然,您肯定需要包括mime.types文件是nginx.conf.我可能在某个时候已经将其注释掉了,或者文档只是需要变得更好.无论哪种方式,这都可以解决.如果没有这一行,它将无法翻译CSS文件.

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.

推荐答案

生产服务器是否返回内容类型为text/css或application/octet-stream的css文件?后者显然是一个常见错误,但不会在chrome中呈现.

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.

这篇关于CSS可用,但推送到生产环境时不呈现[Rails应用]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆