7.2.1. Création de thèmes basés sur Bootstrap. Configuration de PhpStorm et LESS Compiler pour travailler avec notre thème.

07/07/2025, by Ivan

bootstrap

Dans les leçons précédentes, nous avons vu comment créer un thème basé sur un autre thème Stable. Dans ce tutoriel, nous allons montrer comment créer un thème basé sur Bootstrap, un framework populaire pour créer rapidement des mises en page.

Je suppose que Drupal est déjà installé. Passons à l’installation de Bootstrap :

https://www.drupal.org/project/bootstrap

Contrairement à Drupal 7, dans Drupal 8, tous les thèmes du site se trouvent dans le dossier /themes à la racine du site :

Bootstrap

Pour créer votre propre thème basé sur Bootstrap, vous devez créer un sous-thème. Le dossier du sous-thème doit être copié depuis le thème parent :

/themes/bootstrap/starterkits/less

less

Copiez le dossier less dans le dossier /themes, à côté du thème parent Bootstrap, et renommez-le avec le nom de votre thème, ici drupalbook. Renommez aussi les fichiers THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme en remplaçant THEMENAME par le nom de votre thème, par exemple drupalbook.libraries.yml. Seul THEMENAME.starterkit.yml devient drupalbook.info.yml.

drupalbook

Dans le fichier drupalbook.info.yml, modifiez également la section libraries :

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

Il est aussi conseillé de renommer le nom du thème :

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

Renommez également les fichiers de configuration du thème :

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

config

Copiez ensuite le code source de Bootstrap :

http://getbootstrap.com/getting-started/#download

Nous nous intéressons à la version Source, composée de fichiers LESS non compilés :

https://getbootstrap.com/docs/4.3/getting-started/download/

source

Créez un dossier bootstrap dans votre sous-thème et copiez-y les fichiers Bootstrap.

bootstrap

Copiez bien la version Source, pas la version Bootstrap avec CSS compilé. Cela permet de surcharger les variables Bootstrap dans des fichiers spécifiques à Drupal :

/less/overrides.less /less/variable-overrides.less

overrides

Vous pouvez aussi utiliser la version SASS, mais cela nécessite un compilateur SASS. Nous utilisons ici le compilateur LESS intégré à PhpStorm.

Allez sur la page Apparence et activez votre thème :

/admin/appearance

Vous n’aurez pas immédiatement les styles Bootstrap compilés, il faut les compiler. Pour cela, utilisez le plugin LESS Compiler de PhpStorm. Ouvrez les paramètres PhpStorm : Fichier -> Paramètres.

phpstorm

Dans les paramètres, cherchez la section Plugins
Ouvrez la page Plugins
Cherchez « LESS »
Trouvez le plugin « LESS CSS Compiler »
Installez-le via « Install JetBrains plugin ... »

Si le plugin n’est pas trouvé, téléchargez-le ici :

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

Puis installez-le via « Install plugin from disk ... »

Après installation, configurez-le. Dans PhpStorm, cherchez « LESS » dans les paramètres :

less profiles

Cliquez sur « + » pour ajouter un profil LESS, nommez-le par exemple « Bootstrap ». Chaque projet PhpStorm aura son propre profil.

less profiles

Dans les réglages du profil, spécifiez :

Répertoire source LESS : C:\OpenServer\domains\drupal8\themes\drupalbook\less (le dossier LESS de votre thème, pas celui de Bootstrap)
Fichiers inclus : C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less (point d’entrée de la compilation)
Répertoire de sortie CSS : C:\OpenServer\domains\drupal8\themes\drupalbook\css

La compilation automatique à la sauvegarde est pratique, activez-la.

Maintenant, en sauvegardant (Ctrl + S), les fichiers LESS se compilent automatiquement. Vous pouvez aussi lancer la compilation manuellement via un clic droit sur style.less puis « Compile to CSS » :

compilation