Caminho de resources em arquivos CSS no Symfony 2

Problema

Eu tenho um arquivo CSS com alguns caminhos nele (para imagens, fonts, etc. url(..) ).

Minha estrutura de caminho é assim:

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

Quero fazer referência às minhas imagens na folha de estilos.

Primeira Solução

Eu mudei todos os caminhos no arquivo CSS para caminhos absolutos. Esta não é uma solução, pois o aplicativo deve (e tem que!) Estar trabalhando em um subdiretório também.

Segunda Solução

Use Assetic com filter="cssrewrite" .

Então, mudei todos os meus caminhos no meu arquivo CSS para

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

para representar o caminho real do meu diretório de resources para o diretório /web/images . Isso não funciona, uma vez que o cssrewrite produz o seguinte código:

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

o que é, obviamente, o caminho errado.

Após assetic:dump este caminho é criado, o que ainda está errado:

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

O código de twig de Assetic:

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

Solução atual (terceira)

Uma vez que todos os arquivos CSS acabam em /web/css/stylexyz.css , alterei todos os caminhos no arquivo CSS para ser relativo:

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

Essa solução (ruim) funciona, exceto no ambiente dev : o caminho CSS é /app_dev.php/css/stylexyz.css e, portanto, o caminho da imagem resultante disso é /app_dev.php/images/myimage.png , o que resulta em uma NotFoundHttpException .

Existe uma solução melhor e funcionando?

Eu me deparei com o mesmo problema.

Em resumo:

  • Disposto a ter CSS original em um diretório “interno” (Recursos / ativos / css / a.css)
  • Disposto a ter as imagens no diretório “público” (Recursos / public / images / devil.png)
  • Deseja que o twig leva esse CSS, recompila-o em web / css / a.css e faça com que ele aponte a imagem em /web/bundles/mynicebundle/images/devil.png

Eu fiz um teste com TODAS as combinações possíveis (sãs) do seguinte:

  • @notação, notação relativa
  • Analise com cssrewrite, sem ele
  • Fundo da imagem CSS versus direto tag src = para a mesma imagem do que CSS
  • CSS analisou com assetic e também sem analisar com assetic saída direta
  • E tudo isso multiplicado por tentar um “dir público” (como Resources/public/css ) com o CSS e um diretório “privado” (como Resources/assets/css ).

Isso me deu um total de 14 combinações no mesmo twig, e essa rota foi lançada a partir de

  • “/app_dev.php/”
  • “/app.php/”
  • e “/”

dando assim 14 x 3 = 42 testes.

Além disso, tudo isso foi testado trabalhando em um subdiretório, portanto, não há como enganar dando URLs absolutos porque simplesmente não funcionariam.

Os testes foram duas imagens sem nome e, em seguida, os divs nomeados de ‘a’ para ‘f’ para o CSS construído a partir da pasta pública e denominados ‘g to’ l ‘para os construídos a partir do caminho interno.

Eu observei o seguinte:

Apenas 3 dos 14 testes foram mostrados adequadamente nos três URLs. E NENHUM foi da pasta “interna” (Recursos / ativos). Foi um pré-requisito para ter o CSS PUBLIC de reposição e, em seguida, construir com assetic FROM.

Estes são os resultados:

  1. Resultado lançado com /app_dev.php/ Resultado lançado com /app_dev.php/

  2. Resultado lançado com /app.php/ Resultado lançado com /app.php/

  3. Resultado lançado com / insira a descrição da imagem aqui

Então … SOMENTE – A segunda imagem – Div B – Div C são as syntaxs permitidas.

Aqui está o código TWIG:

   {% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}  {% endstylesheets %} {# First Row: ABCDEF #}   {% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}  {% endstylesheets %} {% stylesheets 'bundles/commondirty/css_original/d.css' %}  {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %}  {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %}  {% endstylesheets %} {# First Row: GHIJKL #}   {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %}  {% endstylesheets %} {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %}  {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}  {% endstylesheets %} {% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %}  {% endstylesheets %}   

Devil Devil

A
B
C
D
E
F

G
H
I
J
K
L

O 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; } 

E a.css, b.css, c.css, etc: todos idênticos, apenas mudando a cor e o seletor CSS.

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

A estrutura “diretórios” é:

Diretórios Diretórios

Tudo isso veio, porque eu não queria que os arquivos originais individuais fossem expostos ao público, especialmente se eu quisesse jogar com “menos” filtro ou “sass” ou similar … Não queria meus “originais” publicados, apenas os compilado.

Mas há boas notícias . Se você não quiser ter o “CSS de reserva” nos diretórios públicos … instale-os não com --symlink , mas realmente fazendo uma cópia. Uma vez que “assetic” tenha construído o composto CSS, e você pode DELETE o CSS original do sistema de arquivos e deixar as imagens:

Processo de compilation Processo de compilação

Observe que eu faço isso para o ambiente --env=prod .

Apenas alguns pensamentos finais:

  • Este comportamento desejado pode ser conseguido ao ter as imagens no diretório “público” em Git ou Mercurial e no “css” no diretório “ativos”. Ou seja, em vez de tê-los em “público” como mostrado nos diretórios, imagine a, b, c … residindo nos “ativos” em vez de “público”, do que seu instalador / implementador (provavelmente um script Bash ) colocar o CSS temporariamente no diretório “público” antes dos assets:install é executada, depois os assets:install , e depois assetic:dump e depois automatizando a remoção do CSS do diretório público após assetic:dump foi executado. Isso levaria EXACTAMENTE o comportamento desejado na pergunta.

  • Outra solução (desconhecida, se possível) seria explorar se “ativos: instalar” só podem ser “públicos” como fonte ou também poderiam ter “resources” como fonte para publicar. Isso ajudaria quando instalado com a opção --symlink ao se desenvolver.

  • Além disso, se vamos rotear a remoção do diretório “público”, então, a necessidade de armazená-los em um diretório separado (“ativos”) desaparece. Eles podem viver dentro de “público” em nosso sistema de version control, pois serão descartados após a implantação para o público. Isso também permite o uso de --symlink .

PERTO DE QUALQUER MANEIRA, CUIDADO AGORA: como agora os originais não estão mais lá ( rm -Rf ), existem apenas duas soluções, e não três. A div divisão “B” não funciona mais, pois foi uma binding de ativos (), assumindo que havia o recurso original. Somente “C” (o compilado) funcionará.

Então … há SOMENTE UM VENCEDOR FINAL: Div “C” permite EXACTAMENTE o que foi solicitado no tópico: Para ser compilado, respeite o caminho para as imagens e não exponha a fonte original ao público.

O vencedor é C

O vencedor é C

O filtro cssrewrite não é compatível com a notação @bundle por enquanto. Então você tem duas opções:

  • Referenciar os arquivos CSS na pasta da web (depois: console assets:install --symlink web )

     {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %} 
  • Use o filtro cssembed para incorporar imagens no CSS como este.

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

Vou postar o que funcionou para mim, graças ao @ xavi-montero.

Coloque seu CSS no diretório Resource/public/css seu pacote e suas imagens em Say Resource/public/img .

Mude os caminhos assetic para o formulário 'bundles/mybundle/css/*.css' , no seu layout.

Em config.yml , adicione a regra css_rewrite ao assetic:

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

Agora instale ativos e compile com assetic:

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

Isso é bom o suficiente para a checkbox de desenvolvimento e --symlink é útil, então você não precisa reinstalar seus resources (por exemplo, você adiciona uma nova imagem) quando você entra através de app_dev.php .

Para o servidor de produção, acabei de remover a opção ‘-symlink’ (no meu script de implantação) e adicionei este comando no final:

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

Tudo pronto. Com isso, você pode usar caminhos como este nos arquivos .css: ../img/picture.jpeg

Eu tive o mesmo problema e tentei usar o seguinte como uma solução alternativa. Parece trabalhar até agora. Você pode até criar um modelo falso que apenas contém referências a todos esses ativos estáticos.

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

Observe a omissão de qualquer saída, o que significa que nada aparece no modelo. Quando eu executo o assetic: dump, os arquivos são copiados para o local desejado e o css inclui o trabalho conforme o esperado.

Se pudermos ajudar alguém, lutamos muito com a Assetic e agora estamos fazendo o seguinte no modo de desenvolvimento:

  • Configure como em Dumping Asset Files no dev Environmen, então no config_dev.yml , comentamos:

     #assetic: # use_controller: true 

    E em routing_dev.yml

     #_assetic: # resource: . # type: assetic 
  • Especifique o URL como absoluto da raiz da web. Por exemplo, background-image: url("/bundles/core/dynatree/skins/skin/vline.gif"); Nota: nossa raiz da web vhost está apontando na web/ .

  • Sem uso do filtro cssrewrite

Eu ofereço gerenciar o plugin css / js com o compositor que o instala sob o fornecedor. Eu simbolo aqueles para o diretório de web / bundles, que é permitir o pacote de atualização do compositor conforme necessário.

exemplo:

1 – link simbólico de uma vez (use o comando fromweb / bundles /

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

2 – use o recurso quando necessário, no modelo de twig:

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

Saudações.

Intereting Posts