Angular 2 - Fichier CSS global

Question

Est-il possible d'ajouter un fichier CSS global à Angular 2 ? Actuellement, j'ai de nombreux composants différents qui ont le même style de bouton - mais chacun des composants a son propre fichier CSS avec le style. C'est frustrant pour les modifications.

J'ai lu quelque part sur Stack Overflow qu'il fallait ajouter :

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None            //add this
})

J'ai donc ajouté les lignes ViewEncapsulation dans le composant Root, puis j'ai ajouté le style CSS au CSS de l'application Root (app.component.css) et supprimé le style CSS des fichiers CSS des composants individuels, mais cela n'a pas fonctionné.

Il existe sûrement un moyen d'ajouter un fichier CSS global ? Dois-je ajouter quelque chose aux composants individuels pour qu'ils accèdent au fichier CSS global ?

Answer 1

Il suffit d'écrire vos styles globaux dans votre src/styles.css fichier. Ce fichier sera ajouté à styles.bundle.js lorsque vous exécutez ng build .

Si vous souhaitez ajouter d'autres fichiers de style, vous pouvez le faire dans votre fichier .angular-cli.json (ou angular.json pour Angular 6+). Dans ce fichier, vous verrez un tableau appelé styles avec un seul élément par défaut, à savoir styles.css (ou src/styles.css dans Angular 6). Vous pouvez même inclure .scss des fichiers.

---

Utilisation du SCSS

Si vous souhaitez utiliser SCSS, il suffit de modifier l'extension de votre fichier src/styles.css pour .scss puis reflétez le changement dans votre .angular-cli.json (ou angular.json en 6+), en modifiant l'entrée dans le fichier styles le tableau.

Faire en sorte qu'Angular utilise SCSS par défaut

Lors de la création de composants, vous aimeriez qu'Angular crée .scss au lieu des fichiers de style .css . Voici comment :

Angulaire 7

À partir d'Angular 7, lorsque vous créez une application avec l'option ng new appname il vous sera demandé quel format de feuille de style vous souhaitez utiliser, vous choisirez donc SCSS ( source ). Il semble qu'ici se termine la nécessité de configurer manuellement Angular pour utiliser SCSS.

Angulaire 6

Ajoutez ceci à la fin de votre angular.json fichier ( source ):

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Angular 4 et inférieur

Trouvez-le à la fin de votre .angular-cli.json et modifiez la valeur de styleExt a scss :

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

Answer 2

Vous pouvez simplement importer les css dans le fichier html principal.

Answer 3

Vous pouvez utiliser :

1. Ajouter main.css
2. Ouvrez styles.css dans le dossier principal
3. Ajoutez cette ligne (@import 'main.css' ;)