ruby-on-rails - Rails 3 Assets 和 CSS 相对 URL

Question

我有几个 CSS 文件，它们使用相对路径(如 url( "../img/my_image.jpg" ))来引用图像。 .

一切正常 development但在 production环境，由于所有的CSS文件都打包在一个文件中，结构丢失，相关路径也丢失，找不到图像。

我的结构细节

我有这样的 Assets 结构:

/app
  /assets
    /plugins
      /my_plugin
        /img
          my_image.jpg
        /css
          my_css.css

( /my_plugin 可以是由 css 、 js 和 images 文件组成的组的任何插件，例如 Twitter Bootstrap 任何其他文件)

进 /app/assets/plugins/my_plugin/my_css.css我有类似的东西:

background-image: url("../img/my_image.jpg");

在 /app/assets/stylesheets/application.css :

*= require css/my_css.css

最后在 head我的 html文件:

<%= stylesheet_link_tag "application" %>

我应该怎么做才能解决这个问题？

更新

Mini application to reproduce the issue , 在 README有安装和重现问题的说明。

Answer 1

我认为连接 CSS 文件没有问题。而且您不必手动包含深层嵌套的 CSS 文件:默认情况下，application.css 已经在 *= require_tree . 行中执行了此操作。

图像会重复您的 app/assets/images结构体。要在开发和生产环境中正确处理它们，您有 the respective Guide .检查其第 2.2 节编码 Assets 链接。有关于图像文件的编码路径的解释:

通过 ERb 的 CSS:

 url(<%= asset_path 'image.png' %>)

通过 Sass 的 CSS:

 image-url("rails.png")

预编译图像末尾的所有这些奇怪的十六进制字符都将自动得到尊重。

UPD

我看到您的插件根本不需要 Assets 管道功能。您的样式/脚本已经缩小。您可以移动您的 plugins文件夹到您的 public文件夹(成为 <APP_ROOT>/public/plugins/ )。

然后 删除 您的 application.css 中的以下行:

*= require bootstrap/css/bootstrap

而是 添加 以下几行到您的模板 application.html.erb :

  <%= stylesheet_link_tag    "/plugins/bootstrap/css/bootstrap.min.css", :media => "all" %>
  <%= javascript_include_tag "/plugins/bootstrap/js/bootstrap.min.js" %>

现在，您必须能够通过更换 public/plugins/bootstrap 轻松地在主题之间切换。的内容。

UPD 2

可能你必须明确地告诉 Rails precompile您的插件 Assets :

# /config/environments/production.rb
config.assets.precompile += %w( bootstrap/css/bootstrap.css )