Sommaire

L’inclusion du CSS Inclusion du CSS et du Inclusion du JavaScriptJavaScript dans une vue

Comme nous l’avons dit précédemment, les fichiers CSS et JavaScript, ainsi que les images et les vidéos, doivent être obligatoirement sous le dossier public

Créons un sous-dossier public/css et un sous-dossier public/js. À l’intérieur, créons respectivement les fichiers app.css et app.js.

On peut y mettre un peu de style, par exemple, dans app.css :

h1 { 
    color:blue; 
} 
h2 { 
    color:purple; 
}

Il faut bien sûr avoir une balise <link> dans la vue qui utilise ce style. Mais comment accéder depuis la vue à un élément du dossier public ?

Pour accéder à un élément du dossier public, il existe en Twig un helper : asset()

Syntaxe :

{{ asset(’sousDossier/monFichier’) }}

En réalité, asset() est une fonction qui génère l’URL de base. Elle vous permet d’avoir des applications portables d’une URL à l’autre.

Faisons le lien vers notre CSS et le lien vers notre JavaScript dans le layout base.html.twig

Nous allons utiliser respectivement les blocks stylesheets et javascripts, prévus à cet effet :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8">  ...