twitter-bootstrap-rails：@iconSpritePath無法在生產環境中解析

我剛剛部署了我的Rails應用程序到Heroku，並且在開發環境中顯示出來的所有引導程序圖標只在Heroku上顯示爲小方格。當我使用預編譯資產在本地計算機上以生產模式運行應用程序時，會發生同樣的情況。我使用的是Rails 3，twitter-bootstrap-rails gem和LESS。twitter-bootstrap-rails：@iconSpritePath無法在生產環境中解析

做一些挖我發現這一點後：

自舉實際的CSS跨一大堆LESS文件散佈在Twitter的引導護欄外部庫。 sprites.less是與圖標相關的規則所在的文件。在[class^=「icon-」]，[class * =「icon-」]下有一個規則，將'background-image'屬性設置爲@iconSpritePath。 @iconSpritePath在我的bootstrap_and_overrides.css.less文件中被定義爲asset-path（'twitter/bootstrap/glyphicons-halflings.png'）。

由於某些原因，我不明白，這在開發環境中工作正常，但是當我預編譯我的資產並在生產環境中運行它時，@iconSpritePath在編譯後的CSS文件中被替換爲'none'因此所有圖標都具有「無」的「背景圖像」屬性。

有沒有其他人有這個問題，有沒有人有任何想法如何解決它？我假設我將不得不對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;

這將覆蓋第二個規則[^類=「icon-」]，[*類=」 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;

不知道爲什麼，這是獲取添加...

來源

2012-10-05 Andrew

固定它。這是造成問題的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的引導，包括滑軌的一部分。問題在於Fontawesome圖標文件沒有被預編譯，因爲它們是不尋常的文件類型。我進入了production.rb環境文件，並在config.assets.precompile列表中添加了'.woff'，' .eot'，'.svg'，' .ttf'。然後我重新編譯了我的資產，圖標出現了！繁榮。

來源

2012-10-08 07:16:34 Andrew

twitter-bootstrap-rails：@iconSpritePath無法在生產環境中解析

回答

相關問題