Accès aux variables bootstrap scss dans le composant angulaire 2

Je suis en train de travailler sur un nouveau Angular2 projet, construit à l'aide Angulaire de la CLI et que vous avez configuré le projet d'utiliser SCSS. J'ai Bootstrap 4 correctement chargé dans mon styles.scss fichier cependant, si j'essaie d'accéder Bootstrap (ou de mes propres variables définies dans styles.scss à partir de l'intérieur d'un composant-je obtenir Undefined Variable erreur de construction.

Sont les fichiers de style pour les composants compilés avant l'entrée principale dans le styles nœud de angular-cli.json? Comment puis-je faire, est de sorte que toutes les variables définies au niveau mondial sont disponibles pour tous les composants de l'application? Merci!

angulaires-cli.json

"apps": [
  {
    ...
    "styles": [
      "styles/styles.scss"
    ],
    ...
  }
]

les styles.scss

//Bootstrap
$enable-flex: true; //Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";

composant

.navbar {
  background: $brand-primary; //Undefined variable here
}

source d'informationauteur James Crinkley

  1. 19

    Juste parce que vous importez le fichier de bootstrap 4 dans votre styles.scss ne signifie pas que votre .scss fichiers sur votre composants ont accès.

    Sur votre component.scss vous devez importer le fichier de Bootstrap variables: 

    @import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary; //No more Undefined variable here
}

    Explication

    Beaucoup de gens me semblent confus par cela, vous ne devrait pas importer bootstrap.scss à vos composants, vous ne devez importer les choses que vous avez besoin.

    Si vous regardez de plus près dans le code source de bootstrap.scss ils ont tout séparés dans différents fichiers. Vous avez la mixins dossier et le _variables.scss fichier. Ceux-ci devraient être les seules choses que vous importez sur votre composant pour éviter CSS duplication.

    Cette augmentation de mon bundle de la taille, de l'importation de ces choses sur tous les composants?

    Non, il ne sera pas. Pourquoi? mixins et variables sont sass spécifiques (au moins pour l'instant) donc, quand vous importez toutes les variables dans votre composant comme ceci: 

    @import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary;
}

    la sortie de CSS de ce que sera:

    .navbar {
  background: #007bff;
}

    Le reste des variables seront mis au rebut après la compilation du CSS.

  2. 3

    Quelques personnes ont suggéré @import-ing la variables.scss dans toutes les composantes .scss mais j'ai trouvé cela un peu désordonné. Le faire n'est pas aussi bien travailler avec la façon dont notre société CSS est architecturé. J'ai fini par aller dans cette direction, pour me permettre d'utiliser les variables, mixin, et aussi d'étendre les styles. Cela me permet aussi de gérer l'ensemble de la CSS dans un seul endroit.

    Je suis actuellement en train de travailler sur un projet qui a été généré par Angular2 de la CLI. Il y a donc un style principal.scss

    Une autre façon, j'ai été en mesure d'accomplir ceci est en procédant de la manière suivante:

    1. Retrait de la styleUrls de la app.component.ts fichiers.

      @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
    //styleUrls: ['./app.component.scss']
});

    2. Je gère tout le moins de fichiers dans les principaux styles.scss. Donc mon installation actuelle ressemble à quelque chose comme:

      //Bootstrap
@import "../node_modules/bootstrap-less/bootstrap/index";

//Company Branding
@import "theme/index";

//Components
@import "app/app.component.scss";
@import "app/search/search.component.scss";

    J'espère que cette solution sera utile à quelqu'un.

  3. 2

    Créer un _colors.scss un fichier, une copie de toutes les couleurs de variables à l'intérieur et importer ce fichier dans votre composant.scss fichier.