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

Question

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

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

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

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

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

Первый Вариант

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

<!--15-секундный Решение

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

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

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

чтобы представить фактический путь от моего каталога ресурсов до

. Это не работает, так как cssrewrite производит следующий код:

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

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

после assetic:dump этот путь создан, что все еще неправильно:

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

код веточки Assetic:

{% 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.

есть ли лучшее и рабочее решение?

6 98

css symfony php assetic

6 ответов:

фильтр cssrewrite пока не совместим с нотацией @bundle. Таким образом, у вас есть два варианта:
ссылка на файлы CSS в веб-папке (после:console assets:install --symlink web)
{% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}
используйте cssembed фильтр для вставки изображений в CSS, как это.
{% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}

16

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

поместите свой CSS в свой пакет Resource/public/css каталог, и ваши изображения в say 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

8

У меня была та же проблема, и я просто попытался использовать следующее в качестве обходного пути. Кажется, работает до сих пор. Вы даже можете создать фиктивный шаблон, который просто содержит ссылки на все эти статические активы.
{% stylesheets
    output='assets/fonts/glyphicons-halflings-regular.ttf'
    'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf'
%}{% endstylesheets %}
обратите внимание на пропуск любого вывода, который означает, что ничего не отображается в шаблоне. Когда я запускаю assetic: dump, файлы копируются в нужное место, и css включает работу, как ожидалось.

5

если это может помочь кому - то, мы много боролись с Assetic, и теперь мы делаем следующее в режиме разработки:
настроить как в сброс файлов активов в среде разработки так config_dev.yml, мы прокомментировали:
#assetic:
#    use_controller: true
и в routing_dev.в формате YML
#_assetic:
#    resource: .
#    type:     assetic
указать URL-адрес, как абсолютный из корневого web-каталога. Например, фоновое изображение:url("/bundles/core/dynatree/skins/skin/vline.gif"); примечание: наш веб-корень vhost указывает на web/.

нет использования cssrewrite filter

2

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

exemple:

1-символьная ссылка сразу (используйте команду fromweb / bundles/
ln -sf vendor/select2/select2/dist/ select2
2-Используйте актив там, где это необходимо, в шаблоне twig :
{{ asset('bundles/select2/css/fileinput.css) }}
С уважением.

1

Xavi Montero · Accepted Answer · 2014-08-10 21:09:28

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

короче:

готовы иметь оригинальный CSS в "внутреннем" dir (Resources / assets / css / a. css)

готовы иметь изображения в" публичном " dir (Resources/public/images / devil.png)

желая, чтобы ветка взяла этот CSS, перекомпилирует его в web/css/a.css и заставит его указать изображение в /web/bundles/mynicebundle/images/devil.png

я сделал a тест со всеми возможными (вменяемыми) комбинациями из следующих:

@нотация, относительная нотация

разбор с cssrewrite, без него

CSS image background vs direct tag src= к тому же изображению, что и CSS

CSS разбирается с assetic, а также без разбора с assetic direct output

и все это умножается на попытку "публичного dir" (как Resources/public/css) С CSS и" частным " каталогом (как Resources/assets/css).

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

" / app_dev.php/"

" / app.php/"

и "/"

таким образом, давая 14 х 3 = 42 испытаний.

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

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

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

только 3 из 14 тестов были показаны адекватно на три адреса. И ни один из них не был из "внутренней" папки (ресурсы/активы). Это было необходимым условием, чтобы иметь запасной CSS общественности, а затем построить с assetic оттуда.

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

результат запущен с помощью /app_dev.РНР/

результат запущен с /app.РНР/

результат запущен с помощью /

так... ТОЛЬКО - Второе изображение - Div B - Див С это допускается синтаксисом.

здесь есть код ветки:
<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>
контейнер.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;
}
и.УСБ, б.УСБ, c. css и т. д.: все идентичные, просто меняя цвет и селектор CSS.
.a
{
    background: red url('../images/devil.png');
}
структура "каталоги":

каталоги

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

но есть хорошие новости. Если вы не хотите иметь "запасной CSS" в общедоступных каталогах... установите их не с --symlink, но на самом деле делает копию. После того, как" assetic " построил составной CSS, вы можете удалить исходный CSS из файловой системы и оставить изображения:

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

обратите внимание, что я делаю это для --env=prod окружающая среда.

несколько мысли:

это желаемое поведение может быть достигнуто при наличии изображений в папке "public" в Git или Mercurial и "css" в каталоге "активы". То есть вместо того, чтобы иметь их в "общественном", как показано в каталогах, представьте себе a, b, c... проживающие в "активы", а не "общественное", чем у вашего установщика/установщик (наверное Баш script), чтобы временно поместить CSS в" public " dir раньше assets:install выполняется, то assets:install, потом assetic:dump, а затем автоматизировать удаление CSS из общего каталога после assetic:dump была выполнена. Это позволит достичь именно того поведения, которое требуется в вопросе.

другим (неизвестным, если это возможно) решением было бы изучить, может ли "assets:install" принимать только "public" в качестве источника или также может принимать "assets" в качестве источника для публикации. Это поможет при установке с когда развивающийся.

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

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

так... есть только окончательный победитель: Div " C " позволяет именно то, что было задано в теме: быть скомпилированным, уважать путь к изображениям и не выставлять исходный источник общественности.

победитель C