Fichiers CSS, images et JS hors bundle

Version imprimable

27/12/2012, 16h10
iviath

Fichiers CSS, images et JS hors bundle

Bonjour tout le monde,
Je suis entrain de débuter sur symfony2 et il y a une chose qui m’échappe totalement sur la gestion des templates. Je ne comprend pas comment appliquer un css à mon template par défaut: app/Ressources/views/defaults.html.twig

J'ai créé le répertoire /web/css et fait les appels suivants:
<link href="{{ asset('/css/modal.css') }}" type="text/css" rel="stylesheet" />
<link href="/css/modal.css" type="text/css" rel="stylesheet" />

Mais ma feuille de style ne s'applique jamais.

Quel est la bonne pratique pour appliquer un css hors bundle?

Je suppose que le principe est le même pour les images et le javascript.

Merci d'avance
27/12/2012, 17h06
stephan.78

Bonjour,

Oui le principe est le même que pour les images et les Js, si il se charge, tu dois charger aussi tes css

Quel est le retour du serveur ? 404 ? je suppose.

Il faut regarder le code source généré par Symfony2 et voir si ce qui gêne.

Tu peux poster éventuellement le code source de ta page.

Quel est ton hébergement ?

Merci pour ta réponse.

Actuellement, je travail en local.
Non, je n'ai pas d'erreur 404, ma page est bien reconnu c'est mes feuilles de styles qui ne sont pas chargées donc aucune erreur symfony2.

Mon objectif est simplement de charger des css depuis ma page:
app/Ressources/views/defaults.html.twig

Comme la page est plutot lourde j'en mets qu'un bout.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> {% block stylesheets %} <link href="{{ asset('/css/modal.css') }}" type="text/css" rel="stylesheet" /> <link href="{{ asset('/css/template.css') }}" type="text/css" rel="stylesheet" /> {% endblock %} <title>{% block title %}Accueil!{% endblock %}</title> </head> <body> {% block javascripts %}{% endblock %} <header> <h1 style="float:left;"> Test </h1> <nav> Informations légales | Plan du site | Administration </nav> </header> <section> <nav class="section-nav"> {% block page_nav %}{% endblock %} </nav> <article> {% block article %}{% endblock %} </article> </section> <footer> </footer> </body> </html>
Ou mettre mon CSS? dans /web/css/ directement? Et surtout comment l'appeler?

27/12/2012, 17h50
stephan.78

Tu peux avoir une 404 dans ton code source au niveau de tes css.

Quand tu regardes le code source dans ton navigateur, tu dois voir les liens vers les ressources css, js et images quand tu cliques dessus (dans le code source) tu dois aller sur la ressource. Sinon, c'est qu'elle n'est pas présente.

Oui tu peux les mettre directement dans le répertoire css.
27/12/2012, 18h15
iviath

Effectivement, je ne peux pas accéder aux css. Comment résoudre ca: sachant que mes feuilles de style sont dans:
/web/css/...css
27/12/2012, 18h18
stephan.78

Quelle est l'adresse indiqué dans le code source généré ?
27/12/2012, 18h38
iviath

Il m'indique l'URL suivante: http://127.0.0.1/css/modal.css
Normalement il faudrait avoir: http://127.0.0.1/monsite/web/css/modal.css, mais le problème se répercutera en production si je mets ca, non?
27/12/2012, 18h40
stephan.78

Le code généré pour les Js ? il est comment ?
27/12/2012, 18h43
iviath

Je n'en ai pas encore utilisé, idem pour les photos.
27/12/2012, 18h45
stephan.78

Je suppose donc quand tu vas sur la page app_dev.php, tu ne dois pas avoir les images et css de la page debug de symfony2

ça doit venir de ton paramétrage du vhost.
27/12/2012, 18h49
iviath

Si je comprend bien, une solution serait de parametrer apache pour rediriger mon 127.0.0.1 vers 127.0.0.1/monsite?
27/12/2012, 19h05
iviath

Cela vient d'une erreur toute bête en réalité.
J'ai mis initialement:
{{ asset('/css/modal.css') }}
or il faut mettre
{{ asset('css/modal.css') }}
Car si je met /, il va dans la home de ma vhost, logique.

Ca marche maintenant.
Merci
27/12/2012, 20h38
stephan.78

Comme quoi, j'avais pas tiqué sur ce détails.

Bon dév