Я пытаюсь создать сайт, на котором я работаю на общем хостинге, и все работает отлично, но значки FontAwesome, поскольку Symfony не находит их там, где они должны быть. Я следую этим шагам, чтобы переместить сайт на серийный хостинг:
assets:install
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
файла 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"
Зачем?
Отключено Assetic в SpBowerBundle
Я отключил assetic в SpBowerBundle в /app/config/config.yml
:
# SpBowerBundle sp_bower: install_on_warmup: true allow_root: true bundles: TemplateBundle: ~
Поскольку я использую assetic, а также 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
кеш и запускаю assets:install --symlink
команд 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
всякий случай assets:install --symlink & assetic:dump & assetic:dump --env=prod
Результат: в DEV все в порядке, в PROD все не так
Это результат довольно неудачной ошибки в аскете. См. Описание github для получения более подробной информации.
Решение, о котором я остановился, заключается в использовании https://github.com/fkrauthan/FkrCssURLRewriteBundle
Это единственный подход многих из тех, которые я пробовал, которые работают в каждом случае.
У меня такая же проблема, и это сработало
Я использую 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
На самом деле, это вполне логично, в среде dev она работает, потому что assetic создает столько файлов, сколько ресурсов.
Но когда вы находитесь в режиме производства, каждый асептический блок объединяет все ваши ресурсы в один файл, объединяя все ваши файлы ресурсов.
Проблема заключается в том, что в 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 %}
Я занимался этим некоторое время и придумал новое решение. Удовлетворение ответа @ 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'
У меня была аналогичная проблема, пытаясь использовать шрифты с настройкой Ez Publish. Шрифты были правильно расположены в каталоге web / font /, и .less был правильно скомпилирован, чтобы указать на этот каталог. Тем не менее, я получал 404 ошибки, пытаясь вытащить файлы шрифтов.
Проблема оказалась неверно настроенным виртуальным хостом. Конфигурационный файл имел следующую строку:
RewriteRule ^ / (css | js) /.* \. (Css | js) – [L]
Что эффективно заявляет «обслуживать любой файл из папки css или js, если расширение является .js или .css». Мне пришлось изменить его на
RewriteRule ^ / (css | js | font) /.* \. W * – [L]
чтобы разрешить папку шрифтов и любое расширение. Без этого Symfony и Ez Publish пытались перенаправить URL-адрес на динамический контент.