Шрифты Fontawesome выходят из строя после assets:install и assets:dump

Я пытаюсь настроить сайт, над которым я работаю, на общем хостинге, и все работает нормально, но значки FontAwesome, поскольку Symfony не находит их там, где они должны быть. Я следую этим шагам, чтобы перенести сайт на рабочий виртуальный хостинг:

  • Публиковать активы как печатную копию, так как SH не разрешает символическую ссылку, поэтому я запускаю эту команду assets:install
  • Опубликуйте активы, обрабатываемые Assetic, выполнив следующие команды: assetic:dump (dev) и assetic:dump --env=prod (prod)

Но это не работает, так как я постоянно получаю эти ошибки в Firebug:

"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/img/mybg.png"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.woff?v=4.1.0"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.ttf?v=4.1.0"

На локальном хосте, следуя тем же шагам, все работает нормально, поэтому я не знаю, проблема с разрешением или другая проблема.

Вот как я определяю активы в base.html.twig:

  {% block stylesheets %}
      {% stylesheets
              'bundles/template/css/bootstrap.min.css'
              'bundles/template/css/bootstrap-theme.min.css'
              'bundles/template/css/font-awesome.min.css'
              'bundles/template/css/select2.css'
              'bundles/template/css/select2-bootstrap.css'
              'bundles/template/css/bootstrapValidator.min.css'
              'bundles/template/css/datepicker.css'
              'bundles/template/css/datepicker3.css'
              'bundles/template/css/tanane.css'
         filter='cssrewrite'
      %}
      <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
  {% endblock %}

Я провел исследование и нашел много тем по этой проблеме, например, эту также я нашел этот интересный но у меня есть сомнения по поводу второго.

Может ли кто-нибудь помочь мне в этом? я застрял

Установлен SpBowerBundle + FkrCssURLRewriteBundle

Я установил и настроил оба пакета, но даже после этого у меня все еще есть проблемы с изображениями в этом случае, только в библиотеке Select2.

Это содержимое файла bower.json:

{
    "name": "TemplateBundle",
    "dependencies": {
        "bootstrap": "latest",
        "bootstrap-datepicker": "latest",
        "bootstrap-growl": "latest",
        "bootstrapvalidator": "latest",
        "jquery": "1.11.*",
        "jquery-migrate": "latest",
        "pwstrength-bootstrap": "latest",
        "select2": "latest",
        "font-awesome": "latest"
    }
}

А это строки, которые я добавил к /app/config/config.yml

#FkrCssURLRewriteBundle 
fkr_css_url_rewrite:
    rewrite_only_if_file_exists: true
    clear_urls: true

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: true
        nest_dependencies: false
        filters:
            packages:
                bootstrap:
                    css:
                        - css_url_rewrite
                font_awesome:
                    css:
                        - css_url_rewrite
    bundles:
        TemplateBundle: ~

Это ошибка, которую я получаю сейчас:

"NetworkError: 404 Not Found - http://tanane.dev/select2.png"
"NetworkError: 404 Not Found - http://tanane.dev/select2-spinner.gif"

Почему?

Отключенный актив в SpBowerBundle

Я отключил актив в SpBowerBundle по адресу /app/config/config.yml:

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    bundles:
        TemplateBundle: ~

Поскольку я использую assets, а также SpBowerBundle для обработки зависимостей библиотек, я переписываю блоки CSS/JS в base.html.twig следующим образом:

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
    'bundles/template/components/font-awesome/css/font-awesome.min.css'
    'bundles/template/components/select2/select2.css'
    'bundles/template/css/select2-bootstrap.css'
    'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
    'bundles/template/css/tanane.css'
   filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Затем я очищаю кеш и запускаю команды assets:install --symlink, assetic:dump и assetic:dump --env=prod и по-прежнему не вижу изображений, а также шрифтов FontAwesome:

Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2-spinner.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.woff?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.ttf?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular

Я пропустил что-то еще? Что еще я могу сделать, чтобы исправить эту досадную проблему?

Исправление способа отключения

Я исправил некоторые ошибки, допущенные в конфигурации SpBowerBundle, и теперь у меня есть это:

sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: false
        nest_dependencies: false
    bundles:
        TemplateBundle: ~

Но изображения, управляемые SpBowerBundle, по-прежнему не отображаются, см. прикрепленное изображение:

введите здесь описание изображения

У меня assetic включено в моем config.yml:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:
      - FrontendBundle
      - BackendBundle
      - ProductBundle
      - CommonBundle
      - UserBundle
      - TemplateBundle

Должен ли я отключить его и удалить все эти пакеты оттуда?

Еще один тест

Следуя предложениям @lenybenard, я сделал это:

    {% block stylesheets %}
        {% stylesheets filter='css_url_rewrite'
            'bundles/template/components/font-awesome/css/font-awesome.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
           filter='cssrewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

        {% stylesheets
            'bundles/template/components/select2/select2.css'
            'bundles/template/css/select2-bootstrap.css'
            'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
            'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
            'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
            'bundles/template/css/tanane.css'
           filter='cssrewrite'
           filter='css_url_rewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}

Повторите тот же процесс еще раз:

  • Очистите кэш cache:clear & cache:warmup, а также rm -rf /var/cache & rm -rf /var/logs на всякий случай
  • Из оболочки Symofony2: assets:install --symlink & assetic:dump & assetic:dump --env=prod

Результат: в DEV все нормально, в PROD все не так


person ReynierPM    schedule 04.09.2014    source источник
comment
Попробуйте app/console assets:install path, если вы не используете путь web по умолчанию.   -  person Lkopo    schedule 04.09.2014
comment
@Mr.Smith, я использую веб-путь по умолчанию   -  person ReynierPM    schedule 04.09.2014
comment
Не могли бы вы опубликовать часть своего шаблона ветки, где вы определяете эти активы и создаете теги ссылок, чтобы включить их?   -  person Tom Corrigan    schedule 04.09.2014
comment
@TomCorrigan добавил в основной пост, посмотрите   -  person ReynierPM    schedule 04.09.2014
comment
@TomCorrigan, не могли бы вы взглянуть на информацию, которую я добавил в основной пост? У меня все еще есть проблемы с этим   -  person ReynierPM    schedule 06.09.2014
comment
Я взглянул на ваш сайт, когда вы разместили ссылку (я думаю, вы с тех пор удалили ее), и кажется, что ваша проблема сейчас связана с конфигурацией веб-сервера. Вам необходимо установить базовый путь, из которого вы обслуживаете приложение, в качестве подкаталога web/. Вы обслуживали не по базовому пути проекта, и, следовательно, я мог просматривать файлы ваших поставщиков и т. Д. Я думаю, что это могло быть загромождением путей активов, которые выбирал актив.   -  person Tom Corrigan    schedule 16.09.2014


Ответы (5)


Это результат довольно досадной ошибки в assets. Дополнительные сведения см. в этом описании github.

Я решил использовать https://github.com/fkrauthan/FkrCssURLRewriteBundle.

Это единственный подход из многих, которые я пробовал, который работает во всех случаях.

person Tom Corrigan    schedule 04.09.2014
comment
Один вопрос, мне стоит переписать маршруты с 'bundles/template/css/bootstrap.min.css' на '@TemplateBundle/Resources/public/css/bootstrap.min.css'? Должен ли я использовать уменьшенную версию или обычную версию? Что если мне нравится работать с ресурсами с помощью Bower и [this][github.com/Spea/SpBowerBundle] пачка? - person ReynierPM; 04.09.2014
comment
@ReynierPM Использование альтернативного синтаксиса может решить ваши проблемы в этом случае, но это не всегда работает. FkrCssURLRewriteBundle делает. Я безупречно использовал SpBowerBundle в сочетании с FkrCssURLRewriteBundle. - person Tom Corrigan; 04.09.2014
comment
Так что вы рекомендуете следовать синтаксису? Тот, который у меня есть, или тот, который вы используете в пакетных документах? - person ReynierPM; 04.09.2014
comment
Я думаю, что у вас возникла проблема, потому что вы не настроили фильтр css_url_rewrite для пакета select2 в комплекте Bower. Лично я предпочитаю отключить интеграцию ресурсов с SpBowerBundle и просто использовать его для запуска Bower для установки ресурсов. Затем я ссылаюсь на файлы в своих шаблонах следующим образом: bundles/namespace/components/select2/select2.css - person Tom Corrigan; 05.09.2014
comment
Я отключил актив, как вы предложили, и ошибка все еще есть, какие-либо другие советы? - person ReynierPM; 05.09.2014
comment
Assetic включен по умолчанию в SpBowerBundle, поэтому вам действительно нужно отключить его в config.yml, поместив assetic: false под sp_bower. - person Tom Corrigan; 05.09.2014
comment
Я добавил это assetic: enabled: false nest_dependencies: false в SpBowerBundle, повторил весь процесс, и ничего, изображения по-прежнему не потеряны, только тот, который управляется зависимостями Bower, взгляните на изображение, которое я оставляю в основном посте. - person ReynierPM; 05.09.2014
comment
Это может показаться безумием, но последним шагом, вероятно, будет добавление встроенного фильтра cssrewrite. - person Tom Corrigan; 05.09.2014
comment
сумасшедший или нет, видимо, это решает проблему. Еще я открыл ту же страницу в окне Chrome в режиме инкогнито для работы без какого-либо кеша, и теперь он работает, так что спасибо за ваше время. Хорошего дня - person ReynierPM; 05.09.2014

у меня такая же проблема, и это работает

я использую https://github.com/fkrauthan/FkrCssURLRewriteBundle, а затем в #app/config/config. yml добавьте это

font-awesome-otf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
        output: 'fonts/FontAwesome.otf'
font-awesome-eot:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
        output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
        output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
        output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
        output: 'fonts/fontawesome-webfont.woff'

Я хотел бы поблагодарить: http://www.maraumax.fr/billets-67-utiliser-font-awesome-avec-assetic-sous-symfony2.html

person enhaka    schedule 08.06.2015

На самом деле, это вполне логично, в среде разработки это работает, потому что ассет создает столько файлов, сколько есть ресурсов.

Но когда вы находитесь в производственном режиме, каждый блок активов компилирует все ваши ресурсы в один файл, объединяя все ваши файлы ресурсов.

Проблема в том, что в css @import должен быть в верхней части файла... а здесь, в prod, импорт вашего потрясающего шрифта находится внутри файла и не читается вашим браузером.

Чтобы решить вашу проблему, вы можете сделать это:

Сначала импортируйте таблицу стилей, используя @import :

{% stylesheets filter='css_url_rewrite'
    'bundles/template/components/font-awesome/css/font-awesome.min.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Затем импортируйте остальные

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
    'bundles/template/components/select2/select2.css'
    'bundles/template/css/select2-bootstrap.css'
    'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
    'bundles/template/css/tanane.css'
   filter='css_url_rewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
person lenybernard    schedule 05.09.2014
comment
Вы правы, моя проблема исправлена ​​в dev, но в prod все еще как я могу это исправить? - person ReynierPM; 05.09.2014
comment
Спасибо, это исправило проблему на уровне продукта - person ReynierPM; 05.09.2014
comment
Я жестко проблема была исправлена, но нет, и я не знаю, что еще делать. Посмотрите здесь, который dev и тот же здесь, но в prod к вам приходит другая идея? - person ReynierPM; 06.09.2014
comment
Вы можете взглянуть на информацию, которую я добавил в основной пост? У меня все еще есть проблемы с этим - person ReynierPM; 06.09.2014

Я имел дело с этим некоторое время и придумал новое решение. Немного улучшив ответ @lenybernard, вот мое решение:

Поскольку @import не находится в файле font-awesome-min.css, в моем случае это не сработало. Я использовал тему и обнаружил, что таблица стилей, связанная с этой темой, имеет аннотацию импорта. Кроме того, тема требовала загрузки Bootstrap перед собственным файлом CSS, поэтому перемещение файла theme.css в начало списка или его разделение, как упоминалось в предыдущем ответе, полностью сломало тему. Таким образом, окончательное решение для этого — найти строку с тегом @import и поместить ее в первую строку первого файла в вашем списке ресурсов, а затем удалить ее из файла, на который она ссылается. Например:

'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- if your @import is here
'bundles/foo/font-awesome.css'

...

'bundles/foo/bootstrap.css' <- put it here
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'

Другим решением является создание нового файла CSS и назовите его как хотите, поместите строку @import в этот файл и поместите этот файл вверху списка. Например:

'bundles/foo/font-awesome-fix.css' <- put @import here
'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'
person afkplus    schedule 23.11.2014

У меня была похожая проблема при попытке использовать шрифты с настройкой Ez Publish. Шрифты были правильно расположены в каталоге web/font/, а файл .less был правильно скомпилирован, чтобы указать на этот каталог. Тем не менее, я получал 404 ошибки при попытке вытащить файлы шрифтов.

Проблема оказалась в неправильно настроенном виртуальном хосте. В конфигурационном файле была такая строчка:

Правило перезаписи ^/(css|js)/.*\.(css|js) - [L]

В котором фактически говорится: «обслуживать любой файл из папки css или js, если расширение .js или .css». Мне пришлось изменить его на

RewriteRule ^/(css|js|шрифт)/.*\.w* - [L]

чтобы разрешить папку шрифтов и любое расширение. Без этого Symfony и Ez Publish пытались направить URL-адрес к динамическому контенту.

person Twifty    schedule 06.01.2015