Me he encontrado 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)
- Deseando que la ramita tome ese CSS, lo recompila en web / css / a.css y haz que apunte la imagen en /web/bundles/mynicebundle/images/devil.png
He hecho una prueba con TODAS las combinaciones posibles (sensatas) de lo siguiente:
- @notation, notación relativa
- Analizar con cssrewrite, sin él
- Fondo de imagen CSS vs etiqueta <img> directa src = a la misma imagen que CSS
- CSS analizado con assetic y también sin analizar con salida directa assetic
- Y todo esto multiplicado probando un "directorio público" (as
Resources/public/css) con el CSS y un directorio "privado" (as Resources/assets/css).
Esto me dio un total de 14 combinaciones en la misma ramita, y esta ruta se lanzó desde
- "/app_dev.php/"
- "/app.php/"
- y "/"
dando así 14 x 3 = 42 pruebas.
Además, todo esto ha sido probado trabajando en un subdirectorio, por lo que no hay forma de engañar al dar 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 construido DESDE la carpeta pública y nombrados 'g a' l 'para los construidos 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 PUBLIC de repuesto y luego compilar con assetic FROM allí.
Estos son los resultados:
Resultado lanzado con /app_dev.php/
Resultado lanzado con /app.php/
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, solo 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 el filtro "menos" o "sass" o similar ... No quería que se publicaran mis "originales", solo los compilado uno.
Pero hay buenas noticias . Si no desea tener el "CSS de repuesto" en los directorios públicos ... no lo instale con --symlink, sino haciendo una copia. Una vez que "assetic" ha creado el CSS compuesto, puede BORRAR el CSS original del sistema de archivos y dejar las imágenes:
Proceso de compilación
Tenga en cuenta que hago esto por el --env=prodmedio ambiente.
Solo algunos 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 "activos". Es decir, en lugar de tenerlos en "público" como se muestra en los directorios, imagina a, b, c ... residiendo en los "activos" en lugar de "público", que tu instalador / implementador (probablemente un script Bash ) para poner el CSS temporalmente dentro del directorio "público" antes de que assets:installse ejecute, luego assets:install, luego assetic:dump, y luego automatizar la eliminación de CSS del directorio público después de que assetic:dumpse haya ejecutado. 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 --symlinkopción al desarrollar.
Además, si vamos a realizar un script para eliminarlos del directorio "público", entonces, desaparece la necesidad de almacenarlos en un directorio separado ("activos"). Pueden vivir dentro de "público" en nuestro sistema de control de versiones, ya que se eliminarán cuando se implementen al público. Esto también permite el --symlinkuso.
PERO DE TODOS MODOS, PRECAUCIÓN AHORA: Como ahora los originales ya no están allí ( rm -Rf), solo hay dos soluciones, no tres. El div activo "B" ya no funciona ya que era una llamada de activo () asumiendo que existía el activo original. Sólo funcionará "C" (el compilado).
Entonces ... SOLO HAY UN GANADOR FINAL: Div "C" permite EXACTAMENTE lo que se pidió en el tema: Para ser compilado, respetar el camino a las imágenes y no exponer la fuente original al público.
El ganador es C
