CSS文件中Heroku Rails 4资产管道的路径

Question

我在 Heroku 上运行一个带有自定义 Jquery-ui css 和图像资产的 Rails 4 应用程序。我使用了 rail 的asset:precomile，css/js 文件在 Heroku 上运行良好。我遇到的问题是自定义 jquery-ui 的 css 文件中的背景图像 url。

我知道它们位于 assets/jquery-ui/(orginial-filename)-(rails digest #).(png jpg...)，如果我手动将每个文件设置为其确切路径Heroku，但必须有更简单的方法。截至目前，我所有的 css 图像文件路径都以 /assets/(imagefilename) 为前缀。

---

更新：实际上这不是 jquery-ui-rails gem 和我的自定义 jquery-ui css 之间的冲突。问题与 Sprocket 编译 scss 或 sass 的方式有关。

 .ui-icon
   width: 16px
   height: 16px
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-content .ui-icon
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-header .ui-icon, .ui-state-default .ui-icon
   background-image: image-url('jquery-ui/ui-icons_b83400_256x240.png')

 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon
   background-image: image-url('jquery-ui/ui-icons_ffffff_256x240.png')

 .ui-state-active .ui-icon
   background-image: image-url('jquery-ui/ui-icons_8c291d_256x240.png')

 .ui-state-highlight .ui-icon
   background-image: image-url('jquery-ui/ui-icons_3572ac_256x240.png')

 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon
   background-image: image-url('jquery-ui/ui-icons_fbdb93_256x240.png')

发生在我身上的是……一切都被编译成 application.css/gz。然而 .ui-icon 宽度：16px 高度：16px 背景图片：image-url('jquery-ui/ui-icons_222222_256x240.png')

 .ui-widget-content .ui-icon
   background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')

image-url 被编译成 url(/assets/....) 工作正常。但是下面的一切

 .ui-widget-header .ui-icon, .ui-state-default .ui-icon
   background-image: image-url('jquery-ui/ui-icons_b83400_256x240.png')

所有图片 url 都转换为 url(/images/orginial_filename).... 这不起作用。

---

哈哈...没关系，我知道为什么会这样。那是因为预编译器没有加载 vendor/assets/images 文件夹。只需将其包含在数组中。如果没有找到编译图像资产，我猜预编译器会将 image-url 设置为 url(images/default_filename)。

Answer 1

哈哈...没关系，我知道为什么会这样。那是因为预编译器没有加载 vendor/assets/images 文件夹。只需将其包含在数组中。如果没有找到编译图像资产，我猜预编译器会将 image-url 设置为 url(images/default_filename)。

Answer 2

使用与资产管道挂钩的 Gem 时，您基本上有 3 个选项。

从最简单到最难。

选项 1：安装 gem 并在没有自定义的情况下使用它。

• gem 'jquery/ui-rails' 在 Gemfile 中
• $ bundle install
• rake assets:precompile
• 享受吧。

选项 2：手动安装库，不要安装 gem。

• 从他们的网站下载 jquery-ui。
• 复制到/app/assets/jquery-ui
• rake assets:precompile
• 享受吧。

选项 3：安装 gem，然后用自定义资产覆盖默认值。

警告： Javascript/样式表 require 噩梦。

• `gem 'jquery-ui-rails`` 在 Gemfile 中
• bundle install
• 通过在 app/assets/stylesheets 和 app/assets/javascripts 中添加资产文件来自定义库
• 在 /app/assets/stylesheets/application.css 中添加适当的 requires，其中首先包含库存 jquery-ui 文件，然后要求您的自定义文件覆盖默认值。
• 对 javascript 重复上一步。
• 享受吧。

注意：您可以执行选项 2 并编辑库存 jquery-ui 以满足您的需求，但很多人认为这不纯。我猜将干净的 jquery-ui 文件与您的自定义文件分开是有好处的。

这适用于所有资产 gem，如 Bootstrap 等...

---

别忘了……

在您的 CSS 文件中（假设它们是 SASS，又名 application.css.scss），您可以使用

image-url('jquery-ui/whatever.jpg');

这将被翻译成

url('/assets/jquery-ui/whatever-<hash>.jpg');

在您编译的 CSS 文档中。您可以将其与background-image 等一起使用...