J'ai rencontré le même problème.
En bref:
- Désireux d'avoir le CSS original dans un répertoire "interne" (Resources / assets / css / a.css)
- Désireux d'avoir les images dans le répertoire "public" (Resources / public / images / devil.png)
- Vouloir que cette brindille prenne ce CSS, le recompile dans web / css / a.css et lui fait pointer l'image dans /web/bundles/mynicebundle/images/devil.png
J'ai fait un test avec TOUTES les combinaisons (saines) possibles des éléments suivants:
- @notation, notation relative
- Analyser avec cssrewrite, sans lui
- Arrière-plan de l'image CSS vs balise directe <img> src = vers la même image que CSS
- CSS analysé avec assetic et aussi sans analyse avec la sortie directe assetic
- Et tout cela multiplié en essayant un
Resources/public/css
"répertoire public" (as ) avec le CSS et un répertoire "privé" (as Resources/assets/css
).
Cela m'a donné un total de 14 combinaisons sur la même brindille, et cette route a été lancée à partir de
- "/app_dev.php/"
- "/app.php/"
- et "/"
donnant ainsi 14 x 3 = 42 tests.
De plus, tout cela a été testé en travaillant dans un sous-répertoire, il n'y a donc aucun moyen de tromper en donnant des URL absolues car elles ne fonctionneraient tout simplement pas.
Les tests étaient deux images sans nom, puis des divs nommés de 'a' à 'f' pour le CSS construit à partir du dossier public et nommés 'g à' l 'pour ceux construits à partir du chemin interne.
J'ai observé ce qui suit:
Seuls 3 des 14 tests ont été montrés de manière adéquate sur les trois URL. Et NONE provenait du dossier "interne" (Ressources / actifs). C'était une condition préalable pour avoir le CSS PUBLIC de rechange et ensuite construire avec assetic FROM là-bas.
Voici les résultats:
Résultat lancé avec /app_dev.php/
Résultat lancé avec /app.php/
Résultat lancé avec /
Alors ... UNIQUEMENT - La deuxième image - Div B - Div C sont les syntaxes autorisées.
Voici le code 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>
Le 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;
}
Et a.css, b.css, c.css, etc: tous identiques, il suffit de changer la couleur et le sélecteur CSS.
.a
{
background: red url('../images/devil.png');
}
La structure "répertoires" est:
Répertoires
Tout cela est venu, parce que je ne voulais pas que les fichiers originaux individuels soient exposés au public, spécialement si je voulais jouer avec "moins" filtre ou "sass" ou similaire ... Je ne voulais pas que mes "originaux" soient publiés, seulement le compilé un.
Mais il y a de bonnes nouvelles . Si vous ne voulez pas avoir le "CSS de rechange" dans les répertoires publics ... ne les installez pas avec --symlink
, mais faites vraiment une copie. Une fois que "assetic" a construit le CSS composé, vous pouvez SUPPRIMER le CSS d'origine du système de fichiers et laisser les images:
Processus de compilation
Notez que je fais cela pour l' --env=prod
environnement.
Quelques réflexions finales:
Ce comportement souhaité peut être obtenu en ayant les images dans le répertoire "public" dans Git ou Mercurial et le "css" dans le répertoire "assets". Autrement dit, au lieu de les avoir dans "public" comme indiqué dans les répertoires, imaginez a, b, c ... résidant dans les "assets" au lieu de "public", que votre installateur / déployeur (probablement un script Bash ) mettre temporairement le CSS dans le répertoire "public" avant d' assets:install
être exécuté, puis assets:install
, puis assetic:dump
, automatiser la suppression du CSS du répertoire public après assetic:dump
avoir été exécuté. Cela atteindrait EXACTEMENT le comportement souhaité dans la question.
Une autre solution (inconnue si possible) serait d'explorer si «assets: install» ne peut prendre que «public» comme source ou pourrait également prendre «assets» comme source de publication. Cela aiderait une fois installé avec l' --symlink
option lors du développement.
De plus, si nous allons programmer la suppression du répertoire "public", alors le besoin de les stocker dans un répertoire séparé ("assets") disparaît. Ils peuvent vivre à l'intérieur du "public" dans notre système de contrôle de version, car ils seront supprimés lors du déploiement au public. Cela permet également l' --symlink
utilisation.
MAIS DE TOUTE FAÇON, ATTENTION MAINTENANT: Comme maintenant les originaux ne sont plus là ( rm -Rf
), il n'y a que deux solutions, pas trois. La division de travail "B" ne fonctionne plus car il s'agissait d'un appel asset () en supposant qu'il y avait l'actif d'origine. Seul "C" (celui compilé) fonctionnera.
Donc ... il y a UNIQUEMENT UN GAGNANT FINAL: la Div "C" permet EXACTEMENT ce qui était demandé dans le sujet: Pour être compilé, respectez le chemin d'accès aux images et n'exposez pas la source originale au public.
Le gagnant est C