2

我刚刚将我的 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;

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

4

1 回答 1

0

修复。导致问题的 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.precompile 列表中添加了“ .woff”、“. eot ”、“.svg”、“. ttf” 。然后我重新编译了我的资产，图标出现了！繁荣。

于 2012-10-08T07:16:34.577 回答