PHP Lang
  1. PHP Lang
  3. Путь активов в файлах CSS в Symfony 2
Intereting Posts
PHP: объединить / добавить многомерный массив? В PHP, как проверить, существует ли функция? Лучший способ перенаправления мобильных устройств Заголовок php curl .htaccess запретить все, кроме как разрешить доступ к javascript PHP вычисляет количество дней между двумя датами Переход туда, где отсутствует PHP parse_url (), – анализ только домена Лучший способ читать zip-файл в PHP Как не индексировать URL-адреса? Преждевременный конец заголовков скриптов: index.php, mod_fcgid: чтение таймаута данных за 61 секунду Лучший подход для (кросс-платформенной) потоковой передачи данных в реальном времени в PHP? Обрезаемая фатальная ошибка: объект класса PDOStatement не может быть преобразован в строку в D php / mysql – Проблема при перенаправлении на основе user_level Вставить в таблицу symfony 3 codeigniter – отправить электронную почту wamp gmail

Путь активов в файлах CSS в Symfony 2

проблема

У меня есть файл CSS с некоторыми путями в нем (для изображений, шрифтов и т. Д. url(..) ).

Моя структура пути выглядит так: 

 ... +-src/ | +-MyCompany/ | +-MyBundle/ | +-Resources/ | +-assets/ | +-css/ | +-stylesheets... +-web/ | +-images/ | +-images... ... - ... +-src/ | +-MyCompany/ | +-MyBundle/ | +-Resources/ | +-assets/ | +-css/ | +-stylesheets... +-web/ | +-images/ | +-images... ...

Я хочу ссылаться на мои изображения в таблице стилей.

Первое решение

Я изменил все пути в файле CSS на абсолютные пути. Это не решение, так как приложение должно (и должно!) Работать в подкаталоге тоже.

Второе решение

Используйте Assetic с filter="cssrewrite" .

Поэтому я изменил все свои пути в файле CSS на 

 url("../../../../../../web/images/myimage.png")

для представления фактического пути из каталога ресурсов в каталог /web/images . Это не работает, поскольку cssrewrite создает следующий код: 

 url("../../Resources/assets/")

что, очевидно, является неправильным путем.

После assetic:dump этот путь создан, что по-прежнему не так: 

 url("../../../web/images/myimage.png")

Код ветви Ассифики: 

 {% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssrewrite" %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}

Текущее (третье) решение

Поскольку все файлы CSS попадают в /web/css/stylexyz.css , я изменил все пути в файле CSS относительно относительного: 

 url("../images/myimage.png")

Это (плохое) решение работает, за исключением среды dev : путь CSS – /app_dev.php/css/stylexyz.css и поэтому путь изображения, полученный в результате этого, – /app_dev.php/images/myimage.png , что приводит к NotFoundHttpException .

Есть ли лучшее и эффективное решение?

Я столкнулся с очень-той же проблемой.

Вкратце:

  • Желание иметь оригинальный CSS во внутреннем каталоге (Resources / assets / css / a.css)
  • Желание иметь изображения в «общедоступном» каталоге (Resources / public / images / devil.png)
  • Желая, чтобы эта ветка берет этот CSS, перекомпилирует его в web / css / a.css и заставляет его указывать образ в /web/bundles/mynicebundle/images/devil.png

Я провел тест со всеми возможными (нормальными) комбинациями:

  • @notation, относительная нотация
  • Парсинг с cssrewrite, без него
  • CSS image background vs direct <img> tag src = к тому же самому изображению, кроме CSS
  • CSS анализируется с помощью assetic, а также без синтаксического анализа с ацетатным прямым выходом
  • И все это умножается на попытку «публичного dir» (как Resources/public/css ) с CSS и «частным» каталогом (в качестве Resources/assets/css ).

Это дало мне в общей сложности 14 комбинаций на одной ветке, и этот маршрут был запущен с

  • "/app_dev.php/"
  • "/app.php/"
  • а также "/"

таким образом давая 14 x 3 = 42 теста.

Кроме того, все это было протестировано, работая в подкаталоге, поэтому нет способа обмануть, указав абсолютные URL-адреса, потому что они просто не сработают.

Тесты были двумя неназванными изображениями, а затем разделились имена от 'a' до 'f' для CSS, построенного из общей папки, и назвали 'g to' l 'для тех, которые были построены из внутреннего пути.

Я заметил следующее:

Только 3 из 14 тестов были показаны адекватно по трем URL-адресам. И NONE был из «внутренней» папки (Ресурсы / активы). Это было предпосылкой для того, чтобы иметь запасную CSS PUBLIC, а затем строить с помощью assetic FROM.

Вот результаты:

  1. Результат, запущенный с помощью /app_dev.php/ Результат, запущенный с помощью /app_dev.php/

  2. Результат, запущенный с помощью /app.php/ Результат, запущенный с помощью /app.php/

  3. Результат, запущенный с / введите описание изображения здесь

Итак … ТОЛЬКО – второе изображение – Div B – Div C – разрешенные синтаксисы.

Здесь есть код TWIG: 

 <html> <head> {% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {# First Row: ABCDEF #} <link href="{{ '../bundles/commondirty/css_original/a.css' }}" rel="stylesheet" type="text/css" /> <link href="{{ asset( 'bundles/commondirty/css_original/b.css' ) }}" rel="stylesheet" type="text/css" /> {% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets 'bundles/commondirty/css_original/d.css' %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {# First Row: GHIJKL #} <link href="{{ '../../src/Common/DirtyBundle/Resources/assets/css/g.css' }}" rel="stylesheet" type="text/css" /> <link href="{{ asset( '../src/Common/DirtyBundle/Resources/assets/css/h.css' ) }}" rel="stylesheet" type="text/css" /> {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %} </head> <body> <div class="container"> <p> <img alt="Devil" src="../bundles/commondirty/images/devil.png"> <img alt="Devil" src="{{ asset('bundles/commondirty/images/devil.png') }}"> </p> <p> <div class="a"> A </div> <div class="b"> B </div> <div class="c"> C </div> <div class="d"> D </div> <div class="e"> E </div> <div class="f"> F </div> </p> <p> <div class="g"> G </div> <div class="h"> H </div> <div class="i"> I </div> <div class="j"> J </div> <div class="k"> K </div> <div class="l"> L </div> </p> </div> </body> </html>

Container.css: 

 div.container { border: 1px solid red; padding: 0px; } div.container img, div.container div { border: 1px solid green; padding: 5px; margin: 5px; width: 64px; height: 64px; display: inline-block; vertical-align: top; }

И a.css, b.css, c.css и т. Д.: Все одинаковые, просто меняя цвет и селектор CSS. 

 .a { background: red url('../images/devil.png'); }

Структура «каталогов»:

Справочники Справочники

Все это произошло потому, что я не хотел, чтобы отдельные оригинальные файлы были открыты для публики, особенно если бы я хотел играть с «меньшим» фильтром или «sass» или подобным … Я не хотел, чтобы мои «оригиналы» были опубликованы, только скомпилированный.

Но есть хорошие новости . Если вы не хотите иметь «запасной CSS» в общедоступных каталогах … установите их не с помощью --symlink , а в действительности сделав копию. Когда «assetic» построил составной CSS, и вы можете УДАЛИТЬ оригинальный CSS из файловой системы и оставить изображения:

Процесс компиляции Процесс компиляции

Примечание. Я делаю это для --env=prod .

Всего несколько последних мыслей:

  • Это желаемое поведение может быть достигнуто за счет наличия изображений в «общедоступном» каталоге в Git или Mercurial и «css» в каталоге «assets». То есть вместо того, чтобы иметь их в «общедоступном», как показано в каталогах, представьте, что a, b, c … находятся в «активах» вместо «public», чем ваш установщик / развертыватель (возможно, сценарий Bash ) временно помещать CSS в «общедоступный» каталог перед assets:install выполняется assets:install , затем assets:install , then assetic:dump , а затем автоматизация удаления CSS из общего каталога после assetic:dump выполнен. Это будет ТОЧНО, чтобы поведение было желательным в вопросе.

  • Другое (неизвестное, если возможно) решение будет состоять в том, чтобы исследовать, может ли «активы: устанавливать» использовать только «публичный» источник или же «активы» в качестве источника для публикации. Это поможет при установке с параметром --symlink при разработке.

  • Кроме того, если мы собираемся выполнить сценарий удаления из «общедоступного» каталога, то необходимость сохранения их в отдельном каталоге («активы») исчезает. Они могут жить внутри «общественности» в нашей системе контроля версий, поскольку они будут удалены при развертывании для общественности. Это позволяет также использовать --symlink .

НО ВПЕРВЫЕ, ПРЕДОСТЕРЕЖЕНИЕ СЕЙЧАС: Поскольку теперь оригиналов больше нет ( rm -Rf ), есть только два решения, а не три. Рабочий div «B» больше не работает, так как это был вызов asset (), предполагающий, что был исходный актив. Будет работать только «С» (скомпилированный).

Итак … ТОЛЬКО ОКОНЧАТЕЛЬНЫЙ ПОБЕДИТЕЛЬ: Div «C» позволяет ТОЧНО, что он задал в теме: для компиляции, уважайте путь к изображениям и не публикуйте исходный источник для публики.

Победителем является C

Победителем является C

Фильтр cssrewrite не совместим с номенклатурой @bundle. Таким образом, у вас есть два варианта:

  • Ссылка на файлы CSS в веб-папке (после: console assets:install --symlink web ) 

     {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}

  • Используйте фильтр cssembed для встраивания изображений в CSS, как это. 

     {% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}

Я опубликую то, что сработало для меня, благодаря @ xavi-montero.

Поместите свой CSS в каталог Resource/public/css вашего пакета, а ваши изображения в разделе Resource/public/img .

Измените атрибуты в форме 'bundles/mybundle/css/*.css' в вашем макете.

В config.yml добавьте правило css_rewrite к assetic: 

 assetic: filters: cssrewrite: apply_to: "\.css$"

Теперь установите активы и скомпилируйте их с помощью assetic: 

 $ rm -r app/cache/* # just in case $ php app/console assets:install --symlink $ php app/console assetic:dump --env=prod

Это достаточно хорошо для коробки разработки, а --symlink полезна, поэтому вам не нужно переустанавливать свои активы (например, вы добавляете новое изображение) при входе через app_dev.php .

Для производственного сервера я просто удалил параметр «-symlink» (в моем сценарии развертывания) и добавил эту команду в конце: 

 $ rm -r web/bundles/*/css web/bundles/*/js # all this is already compiled, we don't need the originals

Все сделано. С помощью этого вы можете использовать такие пути в ваших .css-файлах: ../img/picture.jpeg

У меня была такая же проблема, и я просто попытался использовать следующее в качестве обходного пути. Кажется, работает до сих пор. Вы даже можете создать фиктивный шаблон, который просто содержит ссылки на все эти статические активы. 

 {% stylesheets output='assets/fonts/glyphicons-halflings-regular.ttf' 'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf' %}{% endstylesheets %}

Обратите внимание на отсутствие какого-либо вывода, что означает, что на шаблоне ничего не отображается. Когда я запускаю assetic: dump файлы копируются в нужное место, а css включает работу, как ожидалось.

Если это может помочь кому-то, мы много боролись с Assetic, и теперь мы делаем следующее в режиме разработки:

  • Настройте, как в файлах config_dev.yml Asset в Dev Environmen, так что в config_dev.yml мы прокомментировали: 

     #assetic: # use_controller: true

    И в routing_dev.yml 

     #_assetic: # resource: . # type: assetic

  • Укажите URL-адрес как абсолютный из корня веб-сайта. Например, background-image: url("/bundles/core/dynatree/skins/skin/vline.gif"); Примечание: наш веб-хост vhost указывает на web/ .

  • Не используется фильтр cssrewrite

Я управляю css / js плагином с композитором, который устанавливает его под продавцом. Я символически привязываю их к каталогу web / bundles, что позволяет компоновать пакеты обновлений по мере необходимости.

Exemple:

1 – symlink один раз вообще (используйте команду fromweb / bundles / 

 ln -sf vendor/select2/select2/dist/ select2

2 – использовать актив, если необходимо, в шаблоне ветви: 

 {{ asset('bundles/select2/css/fileinput.css) }}

С уважением.