Ścieżka do zasobów w plikach CSS w Symfony 2

Question

Ścieżka do zasobów w plikach CSS w Symfony 2

Problem

Mam plik CSS z kilkoma ścieżkami w nim (dla obrazów, czcionek itp.. url(..)).

Moja struktura ścieżki jest taka:

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

Chcę odwoływać się do moich obrazów w arkuszu stylów.

Pierwsze Rozwiązanie

Zmieniłem wszystkie ścieżki w pliku CSS na ścieżki bezwzględne. Nie jest to rozwiązanie, jak aplikacja powinna(I musi!) też działa w podkatalogu.

Drugie Rozwiązanie

Użyj Assetic z filter="cssrewrite".

Więc zmieniłem wszystkie ścieżki w moim pliku CSS na

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

Aby reprezentować rzeczywistą ścieżkę z mojego katalogu zasobów do katalogu /web/images. To nie działa, ponieważ cssrewrite tworzy następujący kod:

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

Co jest oczywiście złą ścieżką.

Po assetic:dump ta ścieżka jest tworzona, co jest nadal błędne:

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

The twig code of Assetic:

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

Obecne (Trzecie) Rozwiązanie

Ponieważ wszystkie pliki CSS kończą się /web/css/stylexyz.css, Zmieniłem wszystkie ścieżki w pliku CSS na względne:

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

To (złe) rozwiązanie działa, z wyjątkiem dev środowiska: Ścieżka CSS to /app_dev.php/css/stylexyz.css, a zatem ścieżka obrazu wynikająca z tego to /app_dev.php/images/myimage.png, co daje NotFoundHttpException.

Czy istnieje lepsze i działające rozwiązanie?

98

php css symfony assetic

Author: apfelbox, 2012-02-29

Source

6 answers

Filtr cssrewrite nie jest na razie kompatybilny z notacją @bundle. Więc masz dwa wyjścia:

Odwoływać się do plików CSS w folderze www (po: console assets:install --symlink web)
```
{% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}
```

Użyj filtra cssembed, aby osadzić obrazy w CSS w ten sposób.

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

16

Author: jeremymarc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-10 20:20:34

Wpiszę to, co mi się udało, dzięki @ xavi-montero.

Umieść swój CSS w katalogu Resource/public/css Twojego pakietu, a obrazy w say Resource/public/img.

Zmień ścieżki do formularza 'bundles/mybundle/css/*.css' w swoim układzie.

W config.yml Dodaj regułę css_rewrite do assetic:

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

Teraz zainstaluj zasoby i skompiluj za pomocą assetic:

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

Jest to wystarczająco dobre dla pudełka deweloperskiego i --symlink jest przydatne, więc nie musisz ponownie instalować zasobów (na przykład dodajesz nowy obrazek) po wejściu przez app_dev.php.

Dla serwera produkcyjnego usunąłem opcję '-- symlink ' (w moim skrypcie wdrożeniowym) i dodałem tę komendę na końcu:

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

Wszystko skończone. Dzięki temu możesz używać takich ścieżek w swoim .pliki css: ../img/picture.jpeg

8

Author: ChocoDeveloper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-10 20:23:11

Miałem ten sam problem i po prostu próbowałem użyć następującego obejścia. Jak na razie działa. Można nawet utworzyć fałszywy szablon, który zawiera odniesienia do wszystkich tych zasobów statycznych.

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

Zwróć uwagę na pominięcie jakiegokolwiek wyjścia, co oznacza, że nic nie pojawia się w szablonie. Kiedy uruchamiam assetic: dump pliki są kopiowane do żądanej lokalizacji, a css zawiera pracę zgodnie z oczekiwaniami.

5

Author: Cowlby,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-19 22:19:17

Jeśli to może komuś pomóc, to bardzo ciężko pracowaliśmy z Assetic, a teraz wykonujemy następujące czynności w trybie deweloperskim:

Ustawić jak w Dumping plików Asset w środowisku dev więc w config_dev.yml, skomentowaliśmy:
```
#assetic:
#    use_controller: true
```
I w routing_dev.yml
```
#_assetic:
#    resource: .
#    type:     assetic
```
Określ adres URL jako bezwzględny z katalogu głównego. Na przykład, background-image: url("/bundles/core/dynatree/skins/skin/vline.gif"); Uwaga: Nasz katalog główny vhost wskazuje na web/.
Brak użycia filtr cssrewrite

2

Author: user1041440,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-10 20:28:08

Zarządzam wtyczką css / js za pomocą composera, który instaluje ją pod dostawcą. Dowiązuję je symbolicznie do katalogu web / bundles, który pozwala composerowi aktualizować pakiety w razie potrzeby.

Exemple:

1-łącze symboliczne raz w ogóle (Użyj polecenia fromweb / bundles /

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

2 - Użyj aktywów w razie potrzeby, w szablonie gałązki:

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

Pozdrawiam.

1

Author: Jean-Luc Barat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-19 12:42:51

score 193 · Accepted Answer

Natknąłem się na bardzo-bardzo-ten sam problem.

W skrócie:

chętni do umieszczenia obrazów w katalogu" public " (Resources/public/images/devil.png)
Willing that twig takes that CSS, recompiles it into web / css / a. css and make it point the image in / web/bundles/mynicebundle/images / devil.png

Zrobiłem test z wszystkich możliwych (sane) kombinacje:

@ notacja, notacja względna
Parse with cssrewrite, without it
CSS image background vs direct tag src= to the same image than CSS
CSS parsed with assetic I also without parsing with assetic direct output
i wszystko to pomnożone przez wypróbowanie "publicznego katalogu" (jako Resources/public/css) z CSS i" prywatnego " katalogu(jako Resources/assets/css).

To dało mi w sumie 14 kombinacji na tym samym gałązka, a ta trasa została uruchomiona z

"/app_dev.php / "
"/app.php / "
i " / "

W ten sposób daje 14 x 3 = 42 testy.

Dodatkowo, wszystko to zostało przetestowane w podkatalogu, więc nie ma sposobu, aby oszukać podając bezwzględne adresy URL, ponieważ po prostu nie działają.

Testami były dwa nienazwane obrazy, a następnie divy nazwane od " A " do " f "dla CSS zbudowanego z folderu publicznego i nazwane od "g do" l " dla tych zbudowanych z wewnętrznej ścieżki.

Zaobserwowałem:

Tylko 3 z 14 testów zostały odpowiednio pokazane na trzech adresach URL. I żaden nie był z folderu" wewnętrzny " (zasoby/zasoby). Było to warunkiem wstępnym, aby mieć wolny CSS PUBLIC, a następnie budować z assetic stamtąd.

Oto wyniki:

Result launched with / app_dev.php/
Wynik uruchomiony z /app.php/
Wyniki z /

Więc... Tylko - Drugi obrazek - Div B - Div C są dozwolonymi składniami.

Tutaj jest kod gałązki:

<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>

Pojemnik.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;
}

I a. css, b. css, C. css, itp: wszystkie identyczne, tylko zmiana Koloru i selektora CSS.

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

Struktura "katalogi" to:

katalogi

Wszystko to przyszło, ponieważ nie chciałem ujawniać pojedynczych oryginalnych plików dla publiczności, szczególnie jeśli chciałem grać z" mniej "filtrem lub" sass " lub podobne... Nie chciałem publikować moich "oryginałów", tylko skompilowany.

Ale są dobre wieści . Jeśli nie chcesz mieć "spare CSS" w publicznych katalogach... zainstaluj je nie za pomocą --symlink, ale naprawdę wykonując kopię. Gdy "assetic" zbuduje złożony CSS, możesz usunąć oryginalny CSS z systemu plików i pozostawić obrazy:

Kompilacje proces Proces kompilacji

Uwaga robię to dla środowiska --env=prod.

Tylko kilka ostatnich myśli:

To pożądane zachowanie można osiągnąć poprzez umieszczenie obrazów w katalogu "public" w Gitlub Mercurial oraz "css" w katalogu "assets". Oznacza to, że zamiast mieć je w "publicznych", jak pokazano w katalogach, wyobraź sobie a, b, c... rezydując w" assets "zamiast " public" , niż twój instalator/deployer (prawdopodobnie skrypt Bash), aby tymczasowo umieścić CSS w katalogu "public" przed wykonaniem assets:install, następnie assets:install, następnie assetic:dump, a następnie zautomatyzować usuwanie CSS z katalogu publicznego po wykonaniu assetic:dump. W ten sposób można osiągnąć dokładnie takie zachowanie, jakie jest pożądane w pytaniu.
Innym (nieznanym, jeśli to możliwe) rozwiązaniem byłoby zbadanie, czy " assets: install "może przyjmować tylko" public "jako źródło lub może również przyjmować" assets " jako źródło do publikacji. To by pomogło po zainstalowaniu z opcją --symlink podczas programowania.
Dodatkowo, jeśli zamierzamy skryptować usunięcie z katalogu "public", wtedy znika potrzeba przechowywania ich w osobnym katalogu ("assets"). Mogą żyć wewnątrz "publicznego" w naszym systemie kontroli wersji, ponieważ nie będzie upuszczony po wdrożeniu do publicznej. Pozwala to również na użycie --symlink.

Ale w każdym razie, Uwaga teraz: ponieważ teraz oryginałów już nie ma (rm -Rf), są tylko dwa rozwiązania, nie trzy. Działający div " B " już nie działa, ponieważ było to wywołanie asset () sugerujące obecność oryginalnego zasobu. Tylko" C " (skompilowane) będzie działać.

Więc... jest tylko ostateczny zwycięzca: Div " C " pozwala dokładnie to, o co został poproszony w temacie: być skompilowany, szanować ścieżkę do obrazów i nie ujawniać oryginalnego źródła publicznie.

zwycięzcą jest C

Zwycięzcą jest C