Я столкнулся с той же проблемой.
Коротко:
- Желание иметь оригинальный 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 против прямого тега <img> src = к тому же изображению, что и CSS
- CSS анализируется с помощью сборки, а также без анализа с прямым выводом сборки
- И все это умножается на попытки использования «общедоступного
Resources/public/cssкаталога » (as ) с помощью CSS и «частного» каталога (as Resources/assets/css).
Это дало мне в общей сложности 14 комбинаций на одной ветке, и этот маршрут был запущен из
- "/app_dev.php/"
- "/app.php/"
- и "/"
Таким образом, получаем 14 x 3 = 42 теста.
Кроме того, все это было протестировано для работы в подкаталоге, поэтому невозможно обмануть, указав абсолютные URL-адреса, потому что они просто не будут работать.
Тесты представляли собой два безымянных изображения, а затем div с именами от «a» до «f» для CSS, созданным ИЗ общей папки, и с именами от «g до« l »для изображений, построенных по внутреннему пути.
Я заметил следующее:
Только 3 из 14 тестов были адекватно показаны на трех URL. И НЕТ было из «внутренней» папки (Ресурсы / активы). Предварительным условием было иметь запасной CSS PUBLIC, а затем строить с помощью Assetic FROM.
Вот результаты:
Результат запущен с /app_dev.php/
Результат запущен с /app.php/
Результат запущен с /
Итак ... ТОЛЬКО - второе изображение - 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 ... находятся в "активах" вместо "общедоступных", чем ваш установщик / средство развертывания (возможно, сценарий Bash ) временно поместить CSS в "общедоступный" каталог перед assets:installвыполнением, затем assets:install, затем assetic:dump, а затем автоматизировать удаление CSS из общедоступного каталога после assetic:dumpвыполнения. Это обеспечит ТОЧНО то поведение, которое требуется в вопросе.
Другое (если возможно, неизвестное) решение - выяснить, может ли «assets: install» использовать только «public» в качестве источника или также использовать «assets» в качестве источника для публикации. Это поможет при установке с --symlinkопцией при разработке.
Вдобавок, если мы собираемся сценарий удаления из «общедоступного» каталога, тогда отпадает необходимость хранить их в отдельном каталоге («активах»). Они могут находиться внутри «общедоступных» в нашей системе контроля версий, поскольку они будут удалены при развертывании для публики. Это также позволяет --symlinkиспользовать.
НО В любом случае, ВНИМАНИЕ! Поскольку теперь оригиналов больше нет ( rm -Rf), есть только два решения, а не три. Рабочий div "B" больше не работает, поскольку это был вызов asset () при условии, что был исходный актив. Только "C" (скомпилированный) будет работать.
Итак ... есть ТОЛЬКО ФИНАЛЬНЫЙ ПОБЕДИТЕЛЬ: Div "C" позволяет ТОЧНО то, что было задано в теме: для компиляции, соблюдайте путь к изображениям и не раскрывайте исходный код публике.
Победитель C
