Les assets

Depuis la version 6.4 de Symfony, un nouveau composant permet de gérer les assets (CSS/Images/JS) au sein d'un projet : le composant AssetMapper.

Front/Back

Le module Symfony se concentre surtout sur la partie back-end, donc PHP. Cette page est donc une introduction au composant AssetMapper. Pour aller plus loin, voir la documentation du composant.

Fonctionnement

Toutes les assets se trouvent dans le dossier assets à la racine du projet.

Le point d'entrée chargé par le composant AssetMapper est le fichier assets/app.js. Dans ce fichier, on pourra importer les feuilles de styles qu'on souhaite avec le mot-clé import. Par défaut, un fichier de styles assets/styles/app.css est présent et chargé dans le point d'entrée :

assets/app.js

import "./styles/app.css";

Nous pourrons donc écrire notre CSS dans le fichier assets/styles/app.css, il sera automatiquement importé.

Images

Pour utiliser des images au sein d'un projet, on peut créer un dossier assets/images/ et déposer les images statiques à l'intérieur.

Ensuite, dans un template, on pourra insérer une image de la façon suivante :

<p>
  <img src="{{ asset('images/mon_image.png') }}" alt="Mon image" />
</p>

Installer Bootstrap

Pour résumer, les assets se trouvent dans le dossier assets/ à la racine du projet. Ensuite, si on veut ajouter Bootstrap par exemple, on peut exécuter cette commande à la racine du projet :

php bin/console importmap:require bootstrap

Puis, dans le point d'entrée assets/app.js, ajouter l'import du fichier CSS :

assets/app.js

// Importera automatiquement le fichier suivant :
// assets/vendor/bootstrap/dist/css/bootstrap.min.css
import "bootstrap/dist/css/bootstrap.min.css";

Installer Tailwind

Pour installer Tailwind, on peut utiliser un bundle dédié :

composer require symfonycasts/tailwind-bundle

Pour fonctionner, Tailwind a besoin d'un fichier de configuration, contenant au moins les chemins vers les dossiers à aller analyser.

L'analyse de Tailwind dans les fichiers concernés lui permettra de voir quelles classes sont utilisées ou non, puis de générer un fichier ne contenant que les classes nécessaires au bon fonctionnement de l'application.

Pour initialiser la configuration de Tailwind au sein du projet :

php bin/console tailwind:init

Cette commande génèrera automatiquement un fichier tailwind.config.js avec les chemins vers les templates et les assets pré-configurés :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./assets/**/*.js", "./templates/**/*.html.twig"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Par ailleurs, elle va également ajouter les directives Tailwind nécessaires dans le fichier assets/styles/app.css :

assets/styles/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Compiler le CSS

Tailwind, contrairement à Bootstrap, a besoin d'aller explorer les fichiers configurés dans tailwind.config.js, afin de compiler du CSS utilisable par l'application.

Ainsi, on peut éditer les templates de l'application pour utiliser les classes Tailwind, mais on lancera bien la commande suivante pour surveiller et recompiler le CSS lors des changements :

# Cette commande restera lancée et recompilera les CSS lors des changements dans le projet
php bin/console tailwind:build --watch