Utiliser Scampi dans un projet

Ne pas toucher à Scampi

Pour pouvoir bénéficier des mises à jour, il est conseillé d'utiliser Scampi comme une bibliothèque externe « intouchable » (avec le module npm ou le submodule git).

Si vous souhaitez modifier Scampi, il faut télécharger l'archive. Mais vous ne pourrez pas profiter des nombreuses évolutions de Scampi.

Importer et régler les settings

On commencera de toutes façons par définir les variables du projet :

  1. faire une copie de core/_settings.scss et la placer dans assets/project/scss/core/
  2. la renommer _core-MonProjet-settings.scss
  3. l'importer au début du fichier assets/project/scss/styles.scss* via l'instruction @import "core/core-MonProjet-settings";

_core-MonProjet-settings.scss est le fichier qui définit toutes les variables transverses, les fontes, les breakpoints, les gouttières, les couleurs, etc.

Importer les autres fichiers

Suivront ensuite dans le fichier maître du projet les imports des fichiers de Scampi utilisés tels quels, puis des fichiers personnalisant des composants de Scampi et enfin des fichiers propres au projet.

À titre d'exemple, voici le fichier style.scss de ce site qui utilise Scampi sous forme de submodule git.

Lorsque Scampi est utilisé en tant que module npm, la syntaxe des imports des fichiers de Scampi s'écrit sous la forme : @import "@pidila/scampi/NomDuModule/index".