twitter-bootstrap-rails: @iconSpritePath не может быть разрешен в производственной среде

Я только что развернул свое приложение rails на Heroku, и все мои значки начальной загрузки, которые нормально отображались в среде разработки, отображались только в виде маленьких квадратов на Heroku. То же самое происходит, когда я запускаю приложение в рабочем режиме на своем локальном компьютере с предварительно скомпилированными активами. Я использую Rails 3, гем twitter-bootstrap-rails и LESS.

После некоторых копаний я обнаружил это:

Фактический CSS для начальной загрузки распределен по целому набору файлов LESS во внешней библиотеке twitter-bootstrap-rails. sprites.less — это файл, в котором находятся правила, относящиеся к иконкам. В разделе [class^="icon-"], [class*=" icon-"] есть правило, которое устанавливает для свойства background-image значение @iconSpritePath. @iconSpritePath определен в моем файле bootstrap_and_overrides.css.less как ресурс-путь('twitter/bootstrap/glyphicons-halflings.png').

По какой-то причине, которую я не понимаю, это отлично работает в среде разработки, но когда я прекомпилирую свои активы и запускаю их в рабочей среде, @iconSpritePath заменяется на «none» в скомпилированном файле CSS, и, следовательно, все значки имеют свойство background-image, равное 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;

Это перезаписывает второе правило для [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;

Не знаю, почему это добавляется...


twitter-bootstrap ruby-on-rails-3 asset-pipeline pre-compilation twitter-bootstrap-rails
person Andrew    schedule 05.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Починил это. 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 и добавил «.woff», «.eot», «.svg», «.ttf» в config.assets. .прекомпилировать список. Затем я перекомпилировал свои активы, и значки появились! Бум.

person Andrew    schedule 08.10.2012