Comment inclure un fichier CSS dans Symfony 2 et Twig?

Je joue avec Symfony2 et j’ai des problèmes avec les fichiers CSS et JS dans le modèle Twig .

J’ai un bundle nommé Webs/HomeBundle dans lequel j’ai indexAction avec indexAction qui rend un fichier de modèle de brindille:

 public function indexAction() { return $this->render("WebsHomeBundle:Home:index.html.twig"); } 

Donc c’est facile. Maintenant, ce que je veux faire, c’est d’inclure des fichiers CSS et JS dans ce modèle Twig. Le modèle ressemble à ceci:

    {% block stylesheets %}  {% endblock %}     

Le fichier que je voudrais inclure, le fichier main.css se trouve dans:

 Webs/HomeController/Resources/public/css/main.css 

Donc, ma question est fondamentalement, comment diable puis-je inclure un fichier CSS simple dans le modèle Twig?

J’utilise la fonction Twig asset() et elle n’atteint pas le bon chemin CSS. En outre, je lance cette commande dans la console:

 app/console assets:install web 

Ceci a créé un nouveau dossier

 /web/bundles/webshome/... 

c’est juste un lien vers le

 src/Webs/HomeController/Resources/public/ 

droite?

Des questions

  1. Où placez-vous vos fichiers d’ actifs , JS, CSS et images? Est-il correct de les mettre dans le dossier Bundle/Resources/public ? Est-ce le bon endroit pour eux?
  2. Comment incluez-vous ces fichiers d’ actifs dans votre modèle Twig en utilisant la fonction Asset? S’ils sont dans un dossier public, comment puis-je les inclure?
  3. Dois-je configurer autre chose?

Vous faites tout correctement, sauf en passant votre chemin d’access à la fonction asset() .

Selon la documentation – dans votre exemple, cela devrait ressembler à ceci:

 {{ asset('bundles/webshome/css/main.css') }} 

Astuce : vous pouvez également appeler des actifs: installez avec la clé --symlink , cela créera des liens symboliques dans le dossier Web. Ceci est extrêmement utile lorsque vous appliquez souvent des modifications js ou css (de cette manière, vos modifications, appliquées à src/YouBundle/Resources/public seront immédiatement répercutées dans web dossier web sans avoir besoin d’appeler des assets:install ):

 app/console assets:install web --symlink 

De plus, si vous souhaitez append des actifs dans votre modèle enfant, vous pouvez appeler parent() méthode parent() pour le bloc Twig. Dans votre cas, ce serait comme ceci:

 {% block stylesheets %} {{ parent() }}  {% endblock %} 

Et vous pouvez utiliser la balise% stylesheets% (assetic feature):

 {% stylesheets "@MainBundle/Resources/public/colorbox/colorbox.css" "%kerner.root_dir%/Resources/css/main.css" %}  {% endstylesheets %} 

Vous pouvez écrire le chemin d’access à css en tant que paramètre (% parameter_name%).

En savoir plus sur cette variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

Les autres réponses sont valides, mais le guide des bonnes pratiques officielles de Symfony suggère d’utiliser le dossier web/ pour stocker tous les éléments, au lieu de différents ensembles.

Diffuser vos ressources Web sur des dizaines de lots différents complique leur gestion. La vie de vos concepteurs sera beaucoup plus facile si tous les actifs de l’application sont au même endroit.

Les modèles bénéficient également de la centralisation de vos actifs, car les liens sont beaucoup plus concis […]

J’appendais à cela en suggérant que vous ne placez que des micro-actifs dans des micro-ensembles, par exemple quelques lignes de styles uniquement requirejses pour un bouton dans un groupe de boutons.

Si vous utilisez Silex, ajoutez l’ actif Symfony en tant que dépendance:

 composer require symfony/asset 

Ensuite, vous pouvez enregistrer un fournisseur de services d’assurance :

 $app->register(new Silex\Provider\AssetServiceProvider(), array( 'assets.version' => 'v1', 'assets.version_format' => '%s?version=%s', 'assets.named_packages' => array( 'css' => array( 'version' => 'css2', 'base_path' => __DIR__.'/../public_html/resources/css' ), 'images' => array( 'base_urls' => array( 'https://img.example.com' ) ), ), )); 

Puis dans votre fichier modèle Twig dans la section head:

 < !DOCTYPE html>    {% block head %}  {% endblock %}