简体   繁体   English

Gliphs在Ubuntu Rails 4.1安装中无法正确显示

[英]Gliphs not showing up properly on an Ubuntu Rails 4.1 installation

On my development machine: 在我的开发机器上:

Windows 8.1
Ruby 2.0
Rails 4.1
Bootstrap 3

On my production machine: 在我的生产机器上:

Ubuntu 12.4
Ruby 2.1.1
Rails 4.1
Bootstrap 3

Here's my code: 这是我的代码:

<td>
  <%= link_to my_model, class: 'btn btn-info' do %>
    <span class="glyphicon glyphicon-search"></span>
  <% end %>
</td>
<td>
  <%= link_to [:edit, my_model], class: 'btn btn-warning' do %>
    <span class="glyphicon glyphicon-pencil"></span>
  <% end %>
</td>
<td>
  <%= link_to my_model, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' do %>
    <span class="glyphicon glyphicon-remove"></span>
  <% end %>
</td>

The gliphs show up fine on my development machine, but not on the production machine. 这些故障现象在我的开发机器上显示正常,但在生产机器上却没有。 Images attached. 附有图像。 Any ideas? 有任何想法吗?

生产机器开发机

Precompiling: 预编译:

I forgot to add that I precompile as follows: 我忘了补充说,我的预编译如下:

RAILS_ENV=production bundle exec rake assets:precompile

Inspecting the elements: 检查元素:

Here's what firebug says when I inspected these elements. 这是我检查这些元素时Firebug所说的。 They are the same: 他们是一样的:

Firebug inspection for production: 萤火虫生产检查:

<td>
  <a class="btn btn-info" href="/agents/1">
    <span class="glyphicon glyphicon-search"></span>
  </a>
</td>

Firebug inspection for development: Firebug开发检查:

<td>
  <a class="btn btn-info" href="/agents/1">
    <span class="glyphicon glyphicon-search"></span>
  </a>
</td>   

Answer: 回答:

It looks like I was dealing with a known Rails 4.1 issue. 看来我在处理一个已知的Rails 4.1问题。 The solution is to: 解决方案是:

  1. Have the following set in environments/production.rb: 在environment / production.rb中进行以下设置:

    config.assets.compile = true config.assets.compile = true

  2. Precompile assets as follows: 预编译资产如下:

    RAILS_ENV=production bundle exec rake assets:precompile RAILS_ENV =生产捆绑执行佣金资产:预编译

Precompiling the assets will prevent dynamnic asset re-compilation. 预编译资产将防止动态资产重新编译。 I tested it and it now works on my ubuntu 4.1 server 我测试了它,现在可以在我的ubuntu 4.1服务器上使用

There could be a number of issues causing this: 可能有许多问题导致此:

-- -

Precompilation 预编译

The primary issue here will likely be precompilation : 这里的主要问题可能预编译

By default Rails assumes assets have been pre-compiled and will be served as static assets by your web server. 默认情况下,Rails假定资产已经过预编译,并且将被Web服务器用作静态资产。

Precompiling Rails assets is the bane of many Heroku-bound apps (I know you're not using Herou), as many people don't factor in their pre-compilation requirements when designing their asset pipeline. 预编译Rails资产是许多受Heroku绑定的应用程序的祸根(我知道您没有使用Herou),因为许多人在设计资产管道时并未考虑其预编译要求。

The problem you probably have is your assets are either not precompiled, or are referencing their "dynamic" filenames, rather than their "static" ones 您可能遇到的问题是资产未预编译,或者正在引用其“动态”文件名,而不是其“静态”文件名

I would personally precompile your assets before deploying to production: 在部署到生产环境之前,我会亲自对您的资产进行预编译:

$ rake assets:precompile RAILS_ENV=production

- -

Fingerprinting 指纹

When you precompile your assets, Rails performs something called fingerprinting - basically where Rails will append a hash to the end of the filename 当您对资产进行预编译时,Rails会执行称为fingerprinting -基本上,Rails会将哈希添加到文件名的末尾

Another issue for many people is they'll reference the "static" filename using something like the following: 对于许多人来说,另一个问题是他们将使用如下所示的名称来引用“静态”文件名:

#app/assets/stylesheets/application.css
.style {
   background: url("your_image.png");
}

The problem here is although this will work in development (where assets are referenced statically), you will have a problem in production. 这里的问题是,尽管这将在开发中起作用(在其中静态引用资产),但在生产中会遇到问题。 To fix this, you'll need to use some of the Rails CSS pre-processors (SASS) : 要解决此问题,您需要使用一些Rails CSS预处理器(SASS)

#app/assets/stylesheets/application.css
.style {
   background: asset_url("your_image.png");
}

-- -

Fix 固定

In reference to your issue directly, I would say the main problem you're likely not referencing your CSS files correctly, probably with incorrect paths. 直接提到您的问题,我想说的主要问题是您可能没有正确引用CSS文件,可能是路径不正确。

I would firstly look at the developer console in your browser - this will likely tell you that you don't have the various CSS files available, to which you'll then be able to try precompiling & referencing the glyphs dynamically to see if that will work 首先,我将在浏览器中查看developer console -这可能会告诉您您没有可用的各种CSS文件,然后您可以尝试对其进行预编译和动态引用这些字形,以查看是否会工作

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM