vistas comentario comentar php css symfony assetic

php - comentario - Ruta de activos en archivos CSS en Symfony 2



twig symfony (6)

El filtro cssrewrite no es compatible con la notación @bundle por ahora. Entonces tienes dos opciones:

  • console assets:install --symlink web referencia a los archivos CSS en la carpeta web (después de: console assets:install --symlink web )

    {% stylesheets ''/bundles/myCompany/css/*." filter="cssrewrite" %}

  • Utilice el filtro ensamblado para incrustar imágenes en el CSS de esta manera.

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

Problema

Tengo un archivo CSS con algunas rutas (para imágenes, fuentes, etc. url(..) ).

Mi estructura de ruta es así:

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

Quiero hacer referencia a mis imágenes en la hoja de estilo.

Primera solución

Cambié todas las rutas en el archivo CSS a rutas absolutas. Esta no es una solución, ya que la aplicación debería (¡y debe hacerlo!) Funcionar también en un subdirectorio.

Segunda solución

Usa Assetic con filter="cssrewrite" .

Así que cambié todos mis caminos en mi archivo CSS a

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

para representar la ruta real desde mi directorio de recursos al directorio /web/images . Esto no funciona, ya que cssrewrite produce el siguiente código:

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

que obviamente es el camino equivocado.

Después de assetic:dump , se crea esta ruta, que todavía está mal:

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

El código de ramita de Assetic:

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

Solución actual (tercera)

Como todos los archivos CSS terminan en /web/css/stylexyz.css , cambié todas las rutas en el archivo CSS para que sean relativas:

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

Esta (mala) solución funciona, excepto en el entorno de desarrollo: la ruta de acceso de CSS es /app_dev.php/css/stylexyz.css y, por lo tanto, la ruta de la imagen que resulta de esto es /app_dev.php/images/myimage.png , que da como resultado una NotFoundHttpException .

¿Hay una solución mejor y más funcional?

Me encontré con el mismo problema.

En breve:

  • Dispuesto a tener CSS original en un directorio "interno" (Resources / assets / css / a.css)
  • Dispuesto a tener las imágenes en el directorio "público" (Resources / public / images / devil.png)
  • Dispuesto a que la ramita tome ese CSS, lo recompila en web / css / a.css y lo hace apuntar la imagen en /web/bundles/mynicebundle/images/devil.png

Hice una prueba con TODAS las combinaciones posibles (cuerdas) de lo siguiente:

  • @notación, notación relativa
  • Parse con cssrewrite, sin él
  • Fondo de imagen CSS frente a etiqueta <img> directa src = a la misma imagen que CSS
  • CSS analizado con assetic y también sin analizar con salida directa de assetic
  • Y todo esto multiplicado por probar un "directorio público" (como Resources/public/css ) con el CSS y un directorio "privado" (como Resources/assets/css ).

Esto me dio un total de 14 combinaciones en la misma ramita, y esta ruta se inició desde

  • "/app_dev.php/"
  • "/app.php/"
  • y "/"

dando así 14 x 3 = 42 pruebas.

Además, todo esto se ha probado trabajando en un subdirectorio, por lo que no hay forma de engañar dando URL absolutas porque simplemente no funcionarían.

Las pruebas fueron dos imágenes sin nombre y luego divs nombrados de ''a'' a ''f'' para el CSS creado DESDE la carpeta pública y llamado ''g a'' l ''para los creados a partir de la ruta interna.

Observé lo siguiente:

Solo 3 de las 14 pruebas se mostraron adecuadamente en las tres URL. Y NINGUNO era de la carpeta "interna" (Recursos / activos). Era un requisito previo tener el CSS PÚBLICO de repuesto y luego compilar con el DESDE allí.

Estos son los resultados:

  1. Resultado lanzado con /app_dev.php/

  2. Resultado lanzado con /app.php/

  3. Resultado lanzado con /

Entonces ... SOLAMENTE - La segunda imagen - Div B - Div C son las sintaxis permitidas.

Aquí está el código 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>

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

Y a.css, b.css, c.css, etc: todos idénticos, simplemente cambiando el color y el selector de CSS.

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

La estructura de "directorios" es:

Directorios

Todo esto vino, porque no quería que los archivos originales individuales se expusieran al público, especialmente si quería jugar con "menos" filtro o "sass" o similar ... No quería que se publicaran mis "originales", solo el compilado uno.

Pero hay buenas noticias . Si no desea tener el "CSS de repuesto" en los directorios públicos ... instálelos no con --symlink , sino realmente haciendo una copia. Una vez que "assetic" ha creado el compuesto CSS, puede ELIMINAR el CSS original del sistema de archivos y dejar las imágenes:

Proceso de compilación

Tenga en cuenta que hago esto para el --env=prod .

Solo unos pocos pensamientos finales:

  • Este comportamiento deseado se puede lograr teniendo las imágenes en el directorio "público" en Git o Mercurial y el "css" en el directorio "assets". Es decir, en lugar de tenerlos en "público" como se muestra en los directorios, imagine a, b, c ... residiendo en los "activos" en lugar de "público", que tiene su instalador / implementador (probablemente un script Bash ) para colocar el CSS temporalmente dentro del directorio "público" antes de assets:install se ejecute assets:install , luego assets:install , luego assetic:dump , y luego automatizar la eliminación de CSS del directorio público después de que se haya ejecutado assetic:dump . Esto lograría EXACTAMENTE el comportamiento deseado en la pregunta.

  • Otra solución (desconocida si es posible) sería explorar si "assets: install" solo puede tomar "public" como fuente o también podría tomar "assets" como fuente para publicar. Eso ayudaría cuando se instala con la opción --symlink cuando se desarrolla.

  • Además, si vamos a guiar la eliminación del directorio "público", entonces, la necesidad de almacenarlos en un directorio separado ("activos") desaparece. Pueden vivir dentro de "público" en nuestro sistema de control de versiones, ya que se eliminarán al desplegarse al público. Esto también permite el uso de --symlink .

PERO DE TODOS MODOS, PRECAUCIÓN AHORA: Como ahora los originales ya no están allí ( rm -Rf ), solo hay dos soluciones, no tres. La división de trabajo "B" ya no funciona, ya que era una llamada a asset () suponiendo que existía el activo original. Solo "C" (el compilado) funcionará.

Entonces ... SOLO hay un GANADOR FINAL: Div "C" permite EXACTAMENTE lo que se le preguntó en el tema: Para ser compilado, respete el camino a las imágenes y no exponga la fuente original al público.

El ganador es C

Puedo administrar el complemento css / js con el compositor que lo instala bajo el proveedor. Los enlace simbólicamente al directorio web / bundles, eso permite que el compositor actualice los paquetes según sea necesario.

ejemplo:

1 - enlace simbólico una vez (use el comando fromweb / bundles /

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

2 - use el activo donde sea necesario, en la plantilla twig:

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

Saludos.

Si puede ayudar a alguien, hemos luchado mucho con Assetic, y ahora estamos haciendo lo siguiente en modo de desarrollo:

  • Configúrelo como en Dumping Asset Files en dev Environment, así que en config_dev.yml , hemos comentado:

    #assetic: # use_controller: true

    Y en routing_dev.yml

    #_assetic: # resource: . # type: assetic

  • Especifique la URL como absoluta desde la raíz web. Por ejemplo, background-image: url("/bundles/core/dynatree/skins/skin/vline.gif"); Nota: nuestra raíz de vhost web está apuntando en web/ .

  • Sin uso del filtro cssrewrite

Tuve el mismo problema y solo intenté usar lo siguiente como una solución alternativa. Parece que funciona hasta ahora. Incluso puede crear una plantilla ficticia que solo contenga referencias a todos esos activos estáticos.

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

Observe la omisión de cualquier resultado que no signifique nada en la plantilla. Cuando ejecuto assetic: dump, los archivos se copian en la ubicación deseada y el css incluye el trabajo esperado.

Voy a publicar lo que funcionó para mí, gracias a @ xavi-montero.

Coloque su CSS en el directorio Resource/public/css su paquete, y sus imágenes en Resource/public/img .

Cambie las rutas de los elementos a la forma ''bundles/mybundle/css/*.css'' , en su diseño.

En config.yml , agrega la regla css_rewrite a assetic:

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

Ahora instala los activos y compila con assetic:

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

Esto es lo suficientemente bueno para el cuadro de desarrollo, y --symlink es útil, por lo que no tiene que --symlink a instalar sus activos (por ejemplo, agrega una nueva imagen) cuando ingresa a través de app_dev.php .

Para el servidor de producción, simplemente eliminé la opción ''--symlink'' (en mi secuencia de comandos de implementación) y agregué este comando al final:

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

Todo está hecho. Con esto, puede usar rutas como esta en sus archivos ../img/picture.jpeg : ../img/picture.jpeg