SORU
29 ŞUBAT 2012, ÇARŞAMBA

Symfony 2 CSS dosyaları varlıkların yolu

Sorun

Bazı yollar (resim, yazı,.. url(..) vs.) CSS bir dosya var.

Ben, yolun yapısı böyle

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

Stil olarak benim resimler başvurmak istiyorum.

İlk Çözüm

Mutlak yollar için CSS dosyasında tüm yollar değişti. Bu uygulama gerektiği gibi, çözüm (!) bir alt dizin de çalışıyor.

İkinci Çözüm

filter="cssrewrite" ile Assetic kullanın.

CSS dosyamda tüm yolları geçtim

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

/web/images dizinine kaynaklarım gerçek yolu gösterir. Bu cssrewrite aşağıdaki kodu üretir beri çalışmıyor:

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

belli ki yanlış bir yol.

assetic:dump sonra bu yol, hala yanlış olan oluşturulur:

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

Assetic bu dal kodu:

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

(Üçüncü) Geçerli Çözüm

Tüm CSS dosyaları /web/css/stylexyz.css, sonunda beri CSS dosyasında tüm yollar akraba oldum.:

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

(Kötü) bu çözüm, dev ortamında çalışır: CSS yolu /app_dev.php/css/stylexyz.css ve görüntü yolu bu kaynaklanan NotFoundHttpException sonuçları /app_dev.php/images/myimage.png, Bu nedenle.

Daha iyi ve çalışan bir çözüm var mı?

CEVAP
24 NİSAN 2012, Salı

Çok-çok-aynı sorunla karşılaştık.

Kısacası:

  • Orijinal olmasına razı CSS bir "iç" dir (/a.css Kaynakları/varlıklar/css)
  • Bu görüntüler için istekli "ortak" dir (Kaynak/ortak/resimler/şeytan.png)
  • Dal CSS götüren istekli, web/css/içine yeniden derler.css ve /web/paketler/mynicebundle/resimler/şeytan resmi.png

Aşağıdaki Olası (aklı başında) TÜM kombinasyonları ile bir test yaptım

  • @gösterimde, göreli gösterimde
  • Cssrewrite, onsuz ile ayrıştırma
  • Görüntü arka plan vs direkt < CSS;ımg>etiket CSS daha çok Aynı resim= src
  • CSS assetic doğrudan çıkış ile ayrıştırmadan assetic de ayrıştırılır
  • Ve tüm bu çalışarak çarpılan bir "halk dir" (Resources/public/css) CSS ile ve bir "" dizin (Resources/assets/css). özel

Bu bana aynı dal üzerinde 14 kombinasyonları toplam verdi, ve bu güzergahtan başlatıldı

  • "/app_dev.php/"
  • "/app.php/"
  • ve "" . /

böylece 14 x 3 = 42 vererek test eder.

Ayrıca, tüm bu sadece işe yaramaz, çünkü mutlak bir URL vererek kandırmak için bir yol yoktur bu yüzden bir alt çalışma test edilmiştir.

Testler iki isimsiz görüntüler ve sonra divs adında 'a', 'f' için CSS yerleşik halk klasör ve adında 'g 'l' için olanları inşa gelen iç yolu.

Aşağıdaki gözlemledim

Sadece 3 14 testleri yeterince üç URLs gösterildi. Ve HİÇ olmayan bir "iç" klasörü (Kaynaklar/varlıklar). Oradan yedek CSS KAMU ve oluşturmak için ön koşul bir assetic.

Bu sonuçlar şunlardır:

  1. Sonuç /app_dev.php/ile başlattı Result launched with /app_dev.php/

  2. Sonuç /app.php/ile başlattı Result launched with /app.php/

  3. Sonuç /ile başlattı enter image description here

Bu yüzden SADECE... - İkinci resim - B Div - C Div sözdizimi izin verilir.

Burada DAL kodu var:

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

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

Ve bir.css, b.css, c.css, vb: hepsi aynı, sadece renk ve CSS seçici değişiyor.

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

"Dizinler" yapısı:

Dizinler Directories

Tüm bu geldi, çünkü niyetim bu değildi bireyin orijinal dosyaları maruz kalan halk, özellikle eğer oynamak istedim "az" süzgeç ya da "şımarıklık" ya da benzer... niyetim bu değildi benim "orijinaller" yayınlanan, tek bir derlenmiş.

Ama vardıriyi haber. Eğer "" --symlink, ama gerçekten bir kopyasını yapmak ile kamu dizinler... bunları yükleyin. yedek CSS var istersen eğer ... "Assetic" bileşik CSS inşa etti, ve dosya sistemi Orijinal CSS SİLMEK ve görüntüleri bırakabilirsiniz:

Derleme işlemi Compilation process

--env=prod çevre için bunu unutmayın.

Sadece birkaç düşüncemi:

  • Bu istenen bir davranış """" directory. varlıkları" css" Git Mercurial ve dizin halk resimleri suretiyle sağlanabilir Bunun yerine onları "halk" olarak gösterilen dizinler, hayal a, b, c... ikamet eden "varlık" yerine "kamu", birden fazla yükleyici/deployer (muhtemelen bir Bash komut) yerine, geçici olarak CSS içindeki "halk" dır önce assets:install idam, sonra assets:install assetic:dump, ve sonra otomatik temizleme CSS kamu dizin sonra assetic:dump idam edilmiş. Bu TAM olarak davranışlarını soruda istenen elde eder.

  • (Mümkünse bilinmeyen) başka bir çözüm "varlıklar yükleyin:" yalnızca "halk" kaynağı olarak ya da "" yayımlamak için bir kaynak olarak. varlıklar sürebilir eğer keşfetmek için olacak Bunu geliştirirken --symlink seçeneği ile yüklendiğinde yardımcı olacaktır.

  • Eğer kaldırılması senaryo için gidiyoruz eğer Ayrıca, "halk", sonra da, ayrı bir dizinde saklamak gerek dir ("varlıklar") kaybolur. "Halka halka dağıtın. üzerine çökecektir olarak" sürüm kontrol sistemi bizim içinde yaşayabilirler Bu da --symlink kullanım sağlar.

AMA NEYSE, ŞİMDİ DİKKAT:Şimdi orijinalleri yok artık (rm -Rf) olarak değil, sadece iki çözüm, üç değil. İşçi div "B" bir varlık olarak artık çalışmıyor() orijinal varlık olduğunu varsayarak arayın. "C" (derlenmiş) çalışır. sadece

Yani... SADECE bir FİNAL ÖDÜLÜ: Div "C" sağlar TAM olarak ne olduğunu sordum konu: derlenecek, saygı yolunu görüntüler ve maruz bırakmayın orijinal kaynak için halka.

Kazanan C olur

The winner is C

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
PhpCssSymfony2Assetic

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Brendan van Son

    Brendan van

    5 Aralık 2006
  • KRQE

    KRQE

    6 AĞUSTOS 2007
  • vgeller1

    vgeller1

    22 Kasım 2009

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR