twitter-bootstrap-rails：@iconSpritePath 在生产环境中无法解析答案

【问题标题】：twitter-bootstrap-rails: @iconSpritePath can't be resolved in production environmenttwitter-bootstrap-rails：@iconSpritePath 在生产环境中无法解析
【发布时间】：2012-10-05 06:11:39
【问题描述】：

我刚刚将我的 rails 应用程序部署到 Heroku，而我在开发环境中显示良好的所有引导程序图标在 Heroku 上只显示为小方块。当我在本地机器上使用预编译资产以生产模式运行应用程序时，也会发生同样的事情。我正在使用 Rails 3、twitter-bootstrap-rails gem 和 LESS。

在做了一些挖掘之后，我发现了这个：

bootstrap 的实际 CSS 分布在 twitter-bootstrap-rails 外部库中的一大堆 LESS 文件中。 sprites.less 是与图标相关的规则所在的文件。在 [class^="icon-"], [class*=" icon-"] 下有一条规则将 'background-image' 属性设置为 @iconSpritePath。 @iconSpritePath 在我的 bootstrap_and_overrides.css.less 文件中定义为asset-path('twitter/bootstrap/glyphicons-halflings.png')。

出于某种我不明白的原因，这在开发环境中运行良好，但是当我预编译我的资产并在生产环境中运行它时，@iconSpritePath 在编译的 CSS 文件中被替换为“无”，并且因此所有图标都具有“无”的“背景图像”属性。

有没有其他人遇到过这个问题，有没有人知道如何解决这个问题？我假设我必须对 LESS 文件进行一些更改...

编辑：我刚刚发现问题实际上不是图标的路径。就是在编译过程中，在 CSS 文件的开头添加了一条额外的规则：

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

这会覆盖文件中 [class^="icon-"], [class*=" icon-"] 的第二条规则，这是应该使用的：

[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("/assets/twitter/bootstrap/glyphicons-halflings-f6675c325532ec11a984d58e172b8e2a.png");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;

不知道为什么要添加这个...

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap asset-pipeline twitter-bootstrap-rails pre-compilation

【解决方案1】：

修复它。导致问题的 CSS：

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

是 Fontaweome 的一部分，它默认包含在 twitter-bootstrap-rails 中。问题是 Fontawesome 图标文件没有被预编译，因为它们是不寻常的文件类型。我进入 production.rb 环境文件，并在 config.assets 中添加了 '.woff'、'.eot'、'.svg'、'.ttf' .precompile 列表。然后我重新编译了我的资产，图标出现了！轰隆隆。

【讨论】：