Discussion :

[mika34]

Bonjour,

Je me permets reprendre le fil de cette discussion, trouvée grâce à Google, car je rencontre exactement le même problème et lorsque je tente d'appliquer les solutions que vous proposez, eh bien celà ne fonctionne toujours pas (voire ça empire).

Dans le meilleur cas mes pages s'affichent avec le bon style, mais les images composant la CSS (background etc...) n'apparaissent pas dans la page.

Quelqu'un a-t-il une réponse plus détaillée pour répondre à ce problème ?

Merci d'avance pour vos réponses.

[winzou]

Voila RapotOR a donne la solution. J'ai rencontre le meme probleme, et ce qu'il faut faire :
- Ne pas utiliser la syntaxe @Bundle dans le tag stylesheet, mais plutot bundles/monBundle/...
- Utiliser le filtre cssRewrite

Salut,

Est-ce que tu as fait ce que j'ai mis dans mon post la ?
Si oui, donne nous l'adresse à laquelle sf charge ton CSS, et l'adresse à laquelle ton navigateur essaie de récupérer les images de fond.

Utilise la console Chrome pour ca, bouton droit puis inspect élément, puis onglet network. Tu vois les requetes passer et tu vois qu'il cherche une image qui n'existe pas.

[mika34]

Bonjour,

J'ai créé un bundle ChatBundle dans le répertoire src/Chat, avec le générateur de bundle. Mon bundle s'appelle donc ChatChatBundle

j'ai créé un répertoire web/bundles/chatchatbundle et ses répertoires css et images

Dans mon layout principal j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
{% stylesheets 'bundles/chatchat/css/style.css' output='css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

dans config.yml j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

dans config_dev.yml j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
assetic:
    use_controller: true
    filters:
        cssrewrite: ~

Avec ca ma page s'affiche avec le bon style en app_dev.php, mais sans les images... pour mes paramètres d'URL pour l'images de background bg.jpg visibles dans firebug j'ai... url("../bundles/chatchat/images/bg.jpg") Oo (et pas ../images/bg.jpg comme ecrit dans le CSS).

Quand je mets le paramètre use_controller à false dans config_dev.yml, j'ai une page sans style en app_dev.php

Par ailleurs la commande app/console assets:install ne me renvoie aucun message relatif a l'installation des assets dans web/bundles/chatchatbundle

Sinon quand je fais passer le use_controller de true a false et inversement, j'ai parfois des erreurs du type

[Symfony\Component\Config\Exception\FileLoaderLoadException]
Cannot load resource ".".

(erreur 500 sur une page web, mais egalement erreur console, avec le meme message) qui semble apparaire de facon aléatoire (je ne sais jamais trop reproduire cette erreur)

Je ne comprends pas trop en fait... merci pour votre aide en tout cas

[mika34]

bon je progresse un peu

Pour le app_dev.php, en fait c'etait une question de droit... je développe sur ubuntu, apache n'avait pas accès au répertoire des images. Donc de ce côté le problème est résolu.

Par contre pour app.php, j'ai toujours une page sans style avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: true
    filters:
        cssrewrite: ~

dans config.yml...

EDIT : a noter qu'en app.php firebug trouve un fichier http://localhost/private/chat/web/css/ed0ac0b.css sans règle CSS. Or ce fichier n'existe pas

[winzou]

En mode prod regarde tes sources, ton CSS n'est plus chargé depuis symfony, mais directement depuis le répertoire web. Il faut que tu dump tes fichier avec la commande app/console assetic:dump

Après fait nous un résumé de ce qui marche / marche pas parce que je ne te suis plus :p

[mika34]

Bien, merci pour ta réponse, ça permet d'avancer

Pour le moment app_dev.php fonctionne très bien. J'ai mis les répertoires css/ et images/ dans web/bundles/chahchatbundle et tout fonctionne. Le soucis venait du fait qu'apache n'avait pas de possibilité d'accéder à web/bundles/chahchatbundle/images à cause des droits du répertoire images qui étaient mal configurés...

Pour la prod j'ai fait un assetic:dump, j'ai bien css.css et css_style_1.css (style.css est le nom de mon css original) qui sont créés à la racine de web/, mais même après un cache:clear la page reste désespérément dépourvue de style...(une simple page blanche avec du texte donc...)

Merci en tout cas de t'intéresser à mon problème

[winzou]

"Ca marche pas" ca nous aide pas beaucoup :p
Utilise la console de Chrome, bouton droit > inspect élément puis onglet network. Tu vois quel CSS il essaie de charger, où, et quelle erreur il rencontre. Sans ça on peut rien faire !

[mika34]

dans le code source de la page j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<link href="/private/chat/web/css/ed0ac0b.css" type="text/css" rel="stylesheet" />

Ce fichier n'existe pas (ni le dossier web/css d'ailleurs)

Du coup l'onglet réseau de firebug indique un 404 pour ce fichier

(pour app.php, parce que pour app_dev les styles sont correctement téléchargés)

[winzou]

Tu as dumpé tes CSS avec assetic:dump ?

[mika34]

Bonjour,

app/console assetic:dump donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
Dumping all dev assets.
Debug mode is on.
 
[file+] /media/www-dev/private/chat/app/../web/css.css
[file+] /media/www-dev/private/chat/app/../web/css_style_1.css

pourtant, après exécution de cette commande ainsi qu'un cache:clear app.php cherche toujours ed0ac0b.css (qui n'existe pas)

[RapotOR]

cache clear dev ou prod? tu demandes le site en dev ou prod?

[mika34]

euh...

Je fais : app/console cache:clear

Tout court...

[winzou]

Va dans le répertoire app/cache et supprime tout à la main, comme ca on est sur :p

[mika34]

bien vu.

Les styles sont bien rendus après suppression du cache à la main. Pourquoi n'ai-je pas pensé avant à supprimer ce répertoire à la main ><

En tout cas, je pense qu'à l'avenir je préférerai cette méthode à la commande cache:clear.

C'est sympa à vous de vous être intéressé à mon problème, et merci en particuliers à winzou pour sa patience et sa pédagogie.

Résolu.