Afin de configuration Angulaire + Bootstrap 4 utilisation de SASS nous avons juste besoin de configurer l'angle de la CLI et installer le Bootstrap 4 mnp paquet. Il n'y a aucun besoin d'installer SASS compilateur car il est déjà inclus.
EDIT: cette réponse a été mis à jour pour fonctionner avec une version plus récente Angulaire de la CLI (testé avec la version 6.1.3). J'ai laissé les instructions pour les plus âgés Angulaire de la CLI dans le fond de cette réponse, cependant je vous recommande fortement de mettre à jour vos Angulaire de la version CLI.
Des INSTRUCTIONS à l'AIDE de NOUVELLES ANGULAIRE de la CLI (version 6 ou supérieure)
1) Configurer Angulaire de la CLI pour utiliser SASS au lieu de CSS
- Sur les projets existants:
Modifier votre angular.json le fichier et ajouter l' "styleext": "scss" de la valeur de clé à l' projects.PROJECT_NAME.schematics.@schematics/angular:component objet.
C'est comment il devrait ressembler à:
{
// ...
"projects": {
"PROJECT_NAME": {
// ....
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
// ...
}
- Lors de la création d'un nouveau projet
Utilisez simplement:
ng new my-project --style=scss
2) Changer le Composant existant styles de CSS SASS (le cas échéant)
Pour ce faire vous avez juste besoin de renommer le fichier de style d' .css de .scss et de modifier l' @Component({ ... }) configuration en conséquence:
styleUrls: ['./my-component.scss']
De cette façon, le angulaires-cli automatiquement les regarder et de les recompiler ces fichiers à chaque fois qu'ils changent pendant l'exécution des commandes comme ng serve.
3) Ajouter Bootstrap 4
Installer Bootstrap 4 via npm:
npm install bootstrap --save
Maintenant, ajoutez de Bootstrap pour l' angular-cli.json config à l'intérieur de l' styles array (avant tout autre custom css/scss fichiers afin de les laisser remplacer bootstrap règles :
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
De cette façon, le Bootstrap 4 code source restera propre et il sera très facile de le mettre à jour à chaque fois qu'une nouvelle version est disponible.
4) Ajouter votre personnalisé (global) des fichiers SASS
Supplémentaires SASS styles qui devrait incidence globale sur le projet (à la différence de la seule Composante de styles) peut être ajoutée en vertu de l' app/assets/scss puis référencés dans l' styles tableau d' angular-cli.json.
Ma suggestion est de faire référence à un seul main.scss le fichier qui contiendra toutes vos personnalisée SASS styles: par exemple, un _variables.scss pour vos variables personnalisées, un _global.scss le fichier pour l'ensemble de vos règles, etc..
Donc, dans votre angular-cli.json vous sera juste une référence personnalisés main.scss le fichier:
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/assets/scss/main.scss"
],
qui inclut en interne sur mesure toutes vos global* SASS code:
// main.scss
@import "variables";
@import "global";
// import more custom files...
*Notez que vous ne DEVEZ PAS inclure ici l' *.scss des fichiers de style de chacun des Composants.
5) Comprennent le remplacement de Bootstrap, JavaScript et jQuery.
Il y a certains projets qui vous permettent d'utiliser Bootstrap sans jQuery.
Deux exemples:
La différence entre ces deux projet est discuté ici: Quelle est la différence entre "ng-bootstrap" et "ngx-bootstrap"?
INSTRUCTIONS À L'AIDE DE VIEUX ANGULAIRE DE LA CLI
AVERTISSEMENT: je ne vais pas maintenir cette partie de la réponse de plus, afin de procéder plutôt de le lire, je vous recommande de mettre à jour vos Angulaire de la version CLI et en suivant les instructions ci-dessus.
1) Configurer Angulaire de la CLI pour utiliser SASS au lieu de CSS
Exécuter:
ng set defaults.styleExt scss
cela aura une incidence sur votre .angular-cli.json le fichier config ( exemple ).
Remarque: dans le cas où vous êtes à partir de zéro, vous pouvez créer un nouveau projet à l'aide Angulaire de la CLI à l'aide de:
ng new my-project --style=scss
qui est l'équivalent de la création d'un nouveau projet normalement, puis en exécutant la commande mentionnée ci-dessus.
2) Changer le Composant existant styles de CSS SASS (le cas échéant)
Pour ce faire vous avez juste besoin de renommer le fichier de style d' .css de .scss et de modifier l' @Component({ ... }) configuration en conséquence:
styleUrls: ['./my-component.scss']
( exemple ).
De cette façon, le angulaires-cli automatiquement les regarder et de les recompiler ces fichiers à chaque fois qu'ils changent pendant l'exécution des commandes comme ng serve.
3) Ajouter Bootstrap 4
Installer Bootstrap 4 via npm:
npm install bootstrap --save
Maintenant, ajoutez de Bootstrap pour l' .angular-cli.json config à l'intérieur de l' styles array (avant tout autre custom css/scss fichiers afin de les laisser remplacer bootstrap règles :
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
( exemple ).
De cette façon, le Bootstrap 4 code source restera propre et il sera très facile de le mettre à jour à chaque fois qu'une nouvelle version est disponible.
4) Ajouter votre personnalisé (global) des fichiers SASS
Supplémentaires SASS styles qui devrait incidence globale sur le projet (à la différence de la seule Composante de styles) peut être ajoutée en vertu de l' app/assets/scss puis référencés dans l' styles tableau d' .angular-cli.json.
Ma suggestion est de faire référence à un seul main.scss le fichier qui contiendra toutes vos personnalisée SASS styles: par exemple, un _variables.scss pour vos variables personnalisées, un _global.scss le fichier pour l'ensemble de vos règles, etc.. ( exemple).
Donc, dans votre .angular-cli.json vous sera juste une référence personnalisés main.scss le fichier:
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"assets/scss/main.scss"
],
qui inclut en interne sur mesure toutes vos global* SASS code:
// main.scss
@import "variables";
@import "global";
// import more custom files...
*Notez que vous ne DEVEZ PAS inclure ici l' *.scss des fichiers de style de chacun des Composants.
5) Comprennent le remplacement de Bootstrap, JavaScript et jQuery.
Il y a certains projets qui vous permettent d'utiliser Bootstrap sans jQuery.
Deux exemples:
La différence entre ces deux projet est discuté ici: Quelle est la différence entre "ng-bootstrap" et "ngx-bootstrap"?
