Шрифт Bootstrap Twitter Bootstrap не найден при использовании сборки в Prod на Symfony2
Я прочитал много сообщений об этом, но не смог заставить это работать для моего проекта.
Итак, в основном у меня есть проект Symfony2, который включает в себя загрузчик Twitter (v3). Все работает нормально в режиме разработки, но когда я пробую это в режиме prod, я получаю ошибки, говорящие о том, что не удалось найти шрифты начальной загрузки Twitter:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular
Что нормально, потому что у меня нет папки css / в Symfony /
Вот как устроен проект:
app/
src/
vendor/
web/
css/
compiled/
fonts/
js/
файл ветки:
{% block stylesheets %}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'css/bootstrap.min.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Я использовал:
php app/console assetic:dump --env=prod
Я проверил файлы bootstrap.min.css (в web / css / compiled) (prod и dev), и они оба имеют одинаковый путь для шрифтов. Что-то вроде (../../../fonts/fontName.ext).
Если мы посмотрим на путь, он не должен работать ни в dev, ни в режиме prod, поскольку путь помещает файл / шрифты за пределы веб-каталога. Тем не менее, он работает в режиме разработки.
Есть идеи, как решить эту проблему?
Я был бы признателен.
Решение
Если вы используете фильтр «cssrewrite», он переписывает путь к файлам шрифтов (к их оригинальному источнику) как Maxoo уже сказал.
Вы можете добавить сборочный путь для файлов шрифтов следующим образом (чтобы они были скопированы в css/fonts/ папка и css-файлы найдут их с помощью оригинала ../fonts/ дорожка)
Я использовал следующее решение:
config.yml:
assetic:
debug: %kernel.debug%
use_controller: false
assets:
bootstrap_fonts_woff:
inputs:
- 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.woff'
output: fonts/glyphicons-halflings-regular.woff
bootstrap_fonts_ttf:
inputs:
- 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.ttf'
output: fonts/glyphicons-halflings-regular.ttf
bootstrap_fonts_svg:
inputs:
- 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.svg'
output: fonts/glyphicons-halflings-regular.svg
bootstrap_fonts_eot:
inputs:
- 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.eot'
output: fonts/glyphicons-halflings-regular.eot
Тогда позвони
php app/console assetic:dump --env=prod
который должен экспортировать файлы в каталог fonts внутри вашей веб-папки.
Надеюсь это поможет!
Другие решения
Вам не нужно искать их под Symfony/ путь, на самом деле Symfony2 веб-папка web/ так что URL «относительно» web/ папка.
Кстати, вы должны использовать следующую команду
php app/console assets:install
Если вы хотите иметь символические ссылки, вы также можете добавить --symlink параметр вашей команды
Так в чем же разница между активами: установка и сборка: дамп?
assets:install будет ссылаться или скопировать нужные ресурсы в «общедоступную веб-папку»
assetic:dump только объединит все JS в один
Правильное решение:
-
Установите Nodejs, установите конфигурационный файл symfony2, он автоматически скомпилирует выбранный вами фильтр cssrewrite в CSS. Это разрешит эти ошибки.
-
Мои config.yml и config_dev.yml выглядят так, как будто это просто сборочный раздел. Будьте очень осторожны с синтаксисом пути, иначе вы получите эту ошибку «Произошла ошибка во время работы: … Ошибка: Не удается найти модуль» less «» Любой многие люди сталкивались с этими 3 сообщениями об ошибках, Google google эту строку, чтобы узнать, «Ошибка произошла во время работы: Ошибка: Не удается найти модуль» меньше «»
assetic:
debug: '%kernel.debug%'
use_controller:
enabled: '%kernel.debug%'
profiler: true
filters:
cssrewrite: ~
###is for linux path i am on windows for dev and linux for prod
less:
###node: /usr/bin/nodejs
###node_paths: [/usr/lib/nodejs]
node: "C:\\Program Files (x86)\\nodejs\\node.exe"node_paths: ["C:\\Users\\John\\AppData\\Roaming\\npm\\node_modules"]
apply_to: "\.less$"-
не забудьте установить «npm install -g less»
-
В моем конкретном случае: при выполнении «php app / consoleassetic: dump» я получаю ту же ошибку. Это связано с тем, что мой веб-сервер для разработчиков Windows настроен так: корневой каталог — «C: \ xampp \ htdocs \», а проект — «C: \ xampp \ htdocs \ phantom \», а сборка: dump помещает глифы -halflings-Regular.ttf, glyphicons-Halflings-Regular.woff и glyphicons-Halflings-Regular.woff2 в «C: \ xampp \ htdocs \ phantom \ web \ fonts» ОДНАКО, когда страница загружается, она смотрит в «HTTP: // локальный /«Как вы можете видеть, это проблема с моей установкой разработки. Поэтому я копирую шрифты папок« C: \ xampp \ htdocs \ phantom \ web \ fonts »в корневой каталог« C: \ xampp \ htdocs \ ». Это решает проблему.
-
Этого не произойдет в производственной среде, где веб-корнем вашего сервера является «C: \ xampp \ htdocs \ phantom \ web \». Я протестировал на рабочем сервере без необходимости вручную копировать папку шрифтов в webroot.
-
Кроме того, при запуске той же команды в каталоге вашего проекта «php app / consoleassetic: dump» вы получите сообщение об ошибке «FileError:« ../bootstrap/less/bootstrap.less »не найден. Попробовал — .. /bootstrap/less/bootstrap.less,C:\xampp\htdocs\phantom\vendor\mopa\bootstrap-bundle\Mopa\Bundle\BootstrapBundle\Resources\public\bootstrap «К тому же токену был загружен загрузчик« php app / Ресурсы консоли: установите «in» C: \ xampp \ htdocs \ phantom \ web \ bootstrap «, который не является правильным каталогом webroot, поэтому для решения этой же временной проблемы в процессе разработки я просто скопирую каталог» C: \ xampp \ htdocs \ phantom \ web \ bootstrap «на» C: \ xampp \ htdocs \ bootstrap «, что решает проблему. Запустите вашу команду снова, она скомпилируется в css красиво и чисто.
Возможно, вам следует постараться сохранить структуру папок Bootstrap без изменений (например, загрузив ее с помощью bower). Кстати, фильтр cssrewrite будет анализировать ваши css-файлы, чтобы отразить расположение шрифтов.