Accueil » Importer Bootstrap dans Symfony 6

Importer Bootstrap dans Symfony 6

/ Symfony 6 / Par

Bootstrap est un Framework CSS qui permet de faire rapidement un design de son application Web. Dans cette procédure, je vais vous montrer comment importer Bootstrap en Sass dans son projet Symfony 6 à l’aide de NPM (Node Package Manager).

Logo Symfony

Prérequis :

Importer Bootstrap dans Symfony 6 en SCSS :

Pour importer Bootstrap dans Symfony 6 nous allons utiliser Npm, assurez-vous de l’avoir installé avant de suivre la procédure.

Commençons par créer un nouveau projet Symfony 6 à l’aide de la CLI Symfony :

symfony new --webapp nom_projet

Puis on se rends dans le dossier du projet :

cd nom_projet

Ensuite on va va importer webpack dans le projet Symfony :

composer require symfony/webpack-encore-bundle

Puis on installe les dépendances de Webpack avec Npm :

npm install

Renommer le fichier app.css dans le dossier assets/styles/ en app.scss

Modifier dans le fichier app.js :

import './styles/app.css';
# Par
import './styles/app.scss';

Allez dans le fichier webpack.config.js à la racine du projet Symfony puis enlevez « // » avant .enableSassLoader() pour activer le SassLoader

Puis installer le SassLoader avec npm :

npm install sass-loader node-sass --save-dev

Puis modifier comme ci-dessous le fichier template de twig à l’emplacement templates/base.html.twig :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
    </body>
</html>

Ensuite on peut vérifier de l’état du projet à l’aide du compilation :

npm run build

Ensuite on peut installer Bootstrap dans le projet Symfony avec Npm : 

npm install bootstrap

Enfin modifier encore le fichier app.js comme ci-dessous : 

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

// start the Stimulus application
import './bootstrap';

Nous allons ensuite créer un fichier scss personnalisé que nous allons placé dans le dossier /assets/style que nous allons appeler custom.scss

Ensuite on va modifier le structure du fichier app.scss comme ci-dessous :

@import "custom";
@import "~bootstrap/scss/bootstrap";


body {
    background-color: lightgray;
}

Puis on peut refaire un build :

npm run build

Enfin on peut faire un controller de test pour vérifier que Bootstrap fonctionne :

symfony console make:controller Test

Modifier une page du nouveau Controller avec du Bootstrap dedans (exemple le fichier templates/test/index.html.twig): 

{% extends 'base.html.twig' %}

{% block title %}Hello TestController!{% endblock %}

{% block body %}

<div class="container-fluid">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4">
            <h1 class="text-center my-4">Test de Bootstrap</h1>
            <a href="" class="btn btn-primary">test</a>
        </div>
        <div class="col-4"></div>
    </div>
</div>
{% endblock %}

Démarrer le serveur web et connecter vous sur le projet : 

symfony serve -d

Votre page doit ressembler à l’image si Bootstrap c’est bien importé :

Importer Bootstrap dans Symfony 6

Vous pouvez également changer les couleurs de Bootstrap dans le fichier custom.scss présent dans le dossier assets/styles/ avec la structure suivante :

$primary:       #F9070B;

Et ensuite n’oubliez pas de recompiler :

npm run build

Il est aussi possible de mettre automatiquement les formulaires sous le thème de Bootstrap, ajoutez dans le fichier config/packages/twig.yaml : 

twig:
    form_themes: ['bootstrap_5_layout.html.twig']

Importer Bootstrap avec un CDN dans son projet Symfony 6 :

Pour importer Bootstrap à l’aide d’un CDN dans son projet Symfony 6, il s’agit d’une manière plus classique ou il suffit d’ajouté la balise suivant entre les balise head dans le fichier base.html.twig :

<head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Sources :

Webpack : https://webpack.js.org/concepts/
Symfony : https://symfony.com/doc/current/index.html
Bootstrap : https://getbootstrap.com/docs/5.1/getting-started/introduction/

Susceptible de vous intéresser :