Rails 4.0.0 jQuery Mobile按钮图标未在生产中显示 [英] Rails 4.0.0 jQuery Mobile button icons not showing in production

问题描述

我已决定托管自己的jQuery移动文件，因为gem jquery_mobile_rails仅包含1.3.0版，而我想确保自己始终拥有最新版本的jQM.事实证明，这非常容易，因为我只是在我的Assets文件夹中的javascripts下添加了js文件，并在样式表下添加了css.

I have decided to host my own jQuery mobile files as the gem jquery_mobile_rails only includes version 1.3.0 while I want to ensure I always have the latest version of jQM. This proved surprisingly easy as i just added the js file under javascripts and the css under stylesheets in my assets folder.

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

I copied the icon buttons to both /assets/images and to /assets/stylesheets/images. They are displayed properly in development but not in production. My console is showing the images being precompiled.

在production.rb中有以下内容

I have the following in production.rb

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif application-print.css)

推荐答案

尽管Rails 3.2在预编译期间会同时生成指纹(picture-df71a1234da231a124a.png)和非指纹(picture.png)资产，但是Rails 4不再生成非指纹资产.指纹版本.

Whereas Rails 3.2 would generate both a fingerprinted (picture-df71a1234da231a124a.png) and non-fingerprinted (picture.png) asset during precompilation, Rails 4 no longer generates non-fingerprinted versions.

最有可能的是，来自jQuery Mobile的CSS文件包含这样的引用:

Most likely, the CSS file from jQuery Mobile contains references such as this:

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

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

The problem being that the CSS file has no clue what the fingerprint should be. The best solution would be to use Rails' asset path helpers. First, make sure the file is an SCSS file (just rename it so it's something like jquery.mobile-1.3.1.css.scss). This will tell rails to compile it using Sass.

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

Next, change all of the url(...) entries in the css file to image-url(...). Make sure to add quotes around the path. For example, this would load the file at app/assets/images/images/icons-18-white.png (which becomes public/assets/images/icons-18-white.png in production).

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

在部署这些更改后，应先编译jQuery mobile css文件，然后生成的文件应包含正确的指纹URL.

Upon deploying these changes, the jQuery mobile css file should get precompiled and the resulting file should include the proper fingerprinted URLs.

这篇关于Rails 4.0.0 jQuery Mobile按钮图标未在生产中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！