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

Question

我使用自定义Jquery-ui css和图像资源在Heroku上运行Rails 4应用程序。我使用了rails的资产：precomile和css / js文件在Heroku上正常工作。我遇到的问题是自定义jquery-ui的css文件中的background-image 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        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')

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')

所有image-url都转换为url（/ images / orginial_filename）....这不起作用。

---

哈哈......别介意我弄清楚为什么会这样。那是因为预编译器没有加载vendor / assets / images文件夹。只需将它包含在数组中。我想如果预编译器找不到编译图像资源，它会将image-url设置为url（images / default_filename）。

Answer 1

当使用挂钩到资产管道的Gems时，你基本上有3个选项。

从最简单到最难。

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

Gemfile中的
• gem 'jquery/ui-rails'
• $ 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 中添加包含股票jquery-ui文件的相应require，然后要求您的自定义文件覆盖默认值。< / LI>
• 为javascripts重复上一步。
• 享受。

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

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

---

不要忘记......

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

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

，这将被翻译为

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

在已编译的CSS文档中。您可以将其用于background-image等等......

Answer 2

哈哈......别介意我弄清楚为什么会这样。那是因为预编译器没有加载vendor / assets / images文件夹。只需将它包含在数组中。我想如果预编译器找不到编译图像资源，它会将image-url设置为url（images / default_filename）。