Rails 4.0.0 jQuery移动按钮图标未显示在生产中

时间:2013-06-29 18:36:47

标签: ruby-on-rails jquery-mobile ruby-on-rails-4

我决定托管自己的jQuery移动文件,因为gem jquery_mobile_rails只包含版本1.3.0,而我想确保我总是拥有最新版本的jQM。这被证明非常容易,因为我刚刚在javascripts下添加了js文件,在我的assets文件夹中的样式表下添加了css。

我将图标按钮复制到/ assets / images和/ assets / stylesheets / images。它们在开发中正确显示但不在生产中。我的控制台显示正在预编译的图像。

我在production.rb

中有以下内容
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif application-print.css)

1 个答案:

答案 0 :(得分:2)

在预编译期间,Rails 3.2会生成指纹(picture-df71a1234da231a124a.png)和非指纹(picture.png)资产,而Rails 4不再生成非指纹版本。

最有可能的是,jQuery Mobile的CSS文件包含如下引用:

background-image: url(images/icons-18-white.png)

问题是CSS文件不知道指纹应该是什么。最好的解决方案是使用Rails的资产路径助手。首先,确保该文件是SCSS文件(只需将其重命名为jquery.mobile-1.3.1.css.scss)。这将告诉rails使用Sass编译它。

接下来,将css文件中的所有url(...)条目更改为image-url(...)。确保在路径周围添加引号。例如,这会将文件加载到app/assets/images/images/icons-18-white.png(在生产中变为public/assets/images/icons-18-white.png

background-image: image-url("images/icons-18-white.png")

部署这些更改后,jQuery mobile css文件应该进行预编译,生成的文件应该包含正确的指纹URL。