Angular-cli et Sass

Démarrer un projet Angular sous Sass

Angular Cli

Pour tous ceux qui souhaitent utiliser Angular-cli avec Sass facilement voir la démarche:

Lorsqu’on travaille avec le cli, la feuille de style par défaut se termine par .css. Ce qui nous intéresse c’est d’utiliser l’extension scss sur nos fichiers.

Tout d’abord, pour démarrer un nouveau projet angular utilisant .sass , il nous suffit d’utiliser le flag –style

ng new mon-projet-sous-sass --style=scss

On pourrait aussi utiliser du sass ou less mais ce n’est pas ce qui nous intéresse : –style =less

Convertir un projet angular vers Sass

Si vous aviez déjà créé un projet utilisant simplement .css. Cela va nécéssiter un tout petit plus de travail pour le convertir en scss.

Tout d’abord on demande à angular de convertir notre projet pour utiliser le scss

ng set default.styleExt scss

On peut aussi le faire en modifiant le fichier .angular-cli.json

"defaults": {
    "styleExt": "scss",
    "component": {}
  }

Malheusement cela ne modifiera pas les fichier créés. Pour les anciens fichier .css pour devrez les modifier à la main, chager l’extension .css en .scss et penser à modifier dans le component le stylesUrls

@Component({
  styleUrls: ['./mon-component.scss'],
})

Utiliser l’import Sass plus simplement

Si vous créer des mixins ou des variables, le plus souvent , ceux ci sont dans des fichiers externes dans votre dossier sass

par exemple:
|- src/
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Pour utiliser nos mixins et variables dans le fichiers styles.scss, on les importe:

/ fichier styles.scss
  
@import './assets/sass/variable';
@import './assets/sass/mixins';

Rien de fou ici, ca commence à devenir plus contraignant lorsqu’on souhaite utiliser ses mêmes variables dans des composants angular qu’on aurait créé.
Exemple de cas
|- src/
|- app/
|- header
|- social/
|- social.component.html
|- social.component.scss
|- social.component.ts
|- menu/
|- menu.component.html
|- menu.component.scss
|- menu.component.ts
|- search/
|- search.component.html
|- search.component.scss
|- search.component.ts
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Si nous devions importer variables et mixins dans nos 3 fichiers de styles, il aurait fallu y accéder en prenant en compte le chemin relatif du dossier sass par rapport au component.

// fichier component.scss
  
@import "../../../assets/sass/mixins";
@import "../../../assets/sass/variables";

Heureusement Angular-cli propose une manière simplifié d’importer des fichiers sass: il faut utiliser ~

// fichier component.scss
  
@import "~assets/sass/mixins";
@import "~assets/sass/variables";

Angular cli + Bootstrap 4

Bootstrap 4

Pour ceux qui utilisent bootstrap.
On installe d’abord bootstrap via npm

npm install --save boostrap@4.0.0-beta

Ajout du css bootstrap dans le fichier config : .angular-cli.json

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "./styles.scss"
],

On utilise ../node_modules car le point de départ du cli est le dossier src/

Ajout des fichiers sass

Nous n’avons pas toujours besoin d’importer tous les fichiers .
Dans le dossier bootstrap, nous avons tous ces fichiers :

      Bootstrap
      /*!
       * Bootstrap v4.0.0-beta (https://getbootstrap.com)
       * Copyright 2011-2017 The Bootstrap Authors
       * Copyright 2011-2017 Twitter, Inc.
       * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
       */

      @import "functions";
      @import "variables";
      @import "mixins";
      @import "print";
      @import "reboot";
      @import "type";
      @import "images";
      @import "code";
      @import "grid";
      @import "tables";
      @import "forms";
      @import "buttons";
      @import "transitions";
      @import "dropdown";
      @import "button-group";
      @import "input-group";
      @import "custom-forms";
      @import "nav";
      @import "navbar";
      @import "card";
      @import "breadcrumb";
      @import "pagination";
      @import "badge";
      @import "jumbotron";
      @import "alert";
      @import "progress";
      @import "media";
      @import "list-group";
      @import "close";
      @import "modal";
      @import "tooltip";
      @import "popover";
      @import "carousel";
      @import "utilities";

Beaucoup de fichiers non nécéssaire pour vos projets

Pour utiliser bootstrap, nous n’avons besoin que de ce strict minimum

// src/styles.scss
 
@import
  '~bootstrap/scss/functions',
  '~bootstrap/scss/variables',
  '~bootstrap/scss/grid',
  '~bootstrap/scss/mixins',
  '~bootstrap/scss/print',
  '~bootstrap/scss/reboot',
  '~bootstrap/scss/type';

Avec le ~, importé des fichiers sass devient très facile.
+++

 

sass

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *