jquery - css 文件中 Heroku Rails 4 Assets 管道的路径

Question

我使用自定义 Jquery-ui css 和图像 Assets 在 Heroku 上运行 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图标 宽度:16px 高度:16px 背景图片:图片网址('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 文件夹。只需要将它包含在数组中。我猜如果预编译器找不到编译图像 Assets ，它会将 image-url 设置为 url(images/default_filename)。

Answer 1

当使用挂接到 Assets 管道的 Gem 时，您基本上有 3 个选择。

从最简单到最难。

选项 1:安装 gem 并在不自定义的情况下使用它。

• gem 'jquery/ui-rails' 在 Gemfile 中
• $ bundle install
• rake Assets :预编译
• 享受吧。

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

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

选项 3:安装 gem，然后使用自定义 Assets 覆盖默认设置。

警告Javascript/样式表需要噩梦。

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

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

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

---

别忘了...

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

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

这将被翻译成

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

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