css - Rails Assets 未为预编译 Assets 生成正确的 URL

Question

我正在使用 Ruby on Rails 4 开发一个网站，但我遇到了一些 CSS 文件的路径问题。

我的 applicaiton.sass 文件中没有包含以下 Assets :

• mobile.scss
• mozilla.scss
• msie.scss
• opera.scss
• webkit.scss

我已将它们包含在我的 application.rb 中，使用以下内容进行预编译:

config.assets.precompile += [
  'mobile.css',
  'mozilla.css',
  'msie.css',
  'opera.css',
  'webkit.css'
]

在我的生产服务器上，我运行了以下命令(注意:touch 命令是为了确保应用程序重新启动并清除缓存，因为我使用的是 Phusion Passenger 和 Nginx 作为我的服务器):

rake assets:precompile RAILS_ENV=production
touch tmp/restart.txt

运行上述命令后，我注意到 Assets 已预编译并驻留在我的 public/assets/ 目录中。它们也在 public/assets/ 目录的 manifest.json 文件中正确列出。

当我在浏览器中加载站点并查看源代码时，我注意到浏览器特定的 CSS 文件没有使用正确的资源路径。它显示:

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

虽然我希望看到:

<link href="/assets/application-ec1031f251a585c79d4404ef2899f6d1.css" media="screen" rel="stylesheet" />
<link href="/assets/webkit-70899fec75bb8eae24edae491a94f73a.css" media="screen" rel="stylesheet" />

我的 View 看起来使用以下代码:

<% if @mobile %>
  <%= stylesheet_link_tag :mobile %>
<% else %>
  <%= stylesheet_link_tag :application %>
  <%= stylesheet_link_tag :msie if @browser == 'Internet Explorer' %>
  <%= stylesheet_link_tag :opera if @browser == 'Opera' %>
  <%= stylesheet_link_tag :mozilla if @browser == 'Mozilla' %>
  <%= stylesheet_link_tag :webkit if @browser == 'Webkit' %>
<% end %>

我的问题是 webkit.css 路径不应该正确输出还是我遗漏了什么？任何帮助将不胜感激。

Answer 1

当您在生产模式下预编译 Assets 时(假设您遵循了 the Rails asset pipeline guide )，app/assets 下的所有 Assets 都将被编译成 application.css。因此，此处列出的所有文件都已在 application.css 中:

config.assets.precompile += [
  'mobile.css',
  'mozilla.css',
  'msie.css',
  'opera.css',
  'webkit.css'
]

这是推荐的方法，因为一个较大的文件比几个较小的文件加载速度更快，因为 HTTP 请求和响应通常是应用进程中最慢的部分。

如果您绝对需要根据代码的浏览器类型有条件地包含样式表，您可以:

1. 将它们从 application.css 中的 Assets 管道 list 中删除，并将 CSS 文件保留在 app/assets/stylesheets 目录中，然后像上面那样包含它们.
2. 将 CSS 文件移出 Assets 管道目录，然后将它们包含在上面的 View 代码中。这样，它们就不会被编译到application.css文件中，可以单独加载

请记住，这些选项中的任何一个都违背了 Assets 管道的主要意图之一。