Comment ? / How To ?

Comment ajouter un style global à l’application

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir créé le squelette de notre application.

Comment procéder ?

Recommandation

Pour vous familiariser avec le concept d’asset de Nuxt.js, il est fortement recommandé de lire la documentation associée disponible ici.

Vous devez installer les packages node-sass et sass-loader afin de pouvoir utiliser SASS.

npm install --save-dev sass sass-loader@10

Pour cet exemple il faut installer des modules AP4.

Ajouter le module @anakeen/anakeen-platform au projet.

npm add @anakeen/anakeen-platform

Installer les modules.

npx @anakeen/anakeen-platform install

Pour plus d'informations, lien de la documentation

Créer le répertoire assets/css :

mkdir -p assets/css

Créer le fichier assets/css/main.scss :

touch assets/css/main.scss

$primary: #8ae234;
@import "~@anakeen/user-interfaces/components/scss/bootstrap.scss";

.restauratec-main {
  .restauratec-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.5rem;

    .restauratec-header-nav-button {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .nuxt-link-active {
        color: $primary;

        &:hover {
          color: black;
        }
      }

      a {
        width: 100%;
        height: 100%;
        text-decoration: auto;
        text-align: center;
        color: black;
        font-weight: bold;
        font-size: 1.5rem;
      }
    }
  }
  .restauratec-body {
    width: 100%;
    height: 100%;
  }
}

Recommandation

Pour vous familiariser avec la configuration de Nuxt.js, il est fortement recommandé de lire la documentation associée disponible ici.

Créer à la racine du projet le fichier nuxt.config.js :

touch nuxt.config.js

export default {
  css: ["@/assets/css/bootstrap.scss", "@/assets/css/kendo.scss", "@/assets/css/main.scss"],
};

Tester le style

Lancer la commande de serveur de développement Nuxt.js :

npm run dev

Vous pouvez alors voir le style ajouté sur http://localhost:3000/boisson par exemple :

StyleGlobal

Et ensuite ?

Comment intégrer un composant Anakeen Platform 4