web-dev-qa-db-fra.com

Angular 2 - Fichier CSS global

Est-il possible d'ajouter un fichier CSS global à Angular 2? À l'heure actuelle, de nombreux composants ont le même style de bouton, mais chacun d'entre eux possède son propre fichier CSS avec le style. C'est frustrant pour les changements.

J'ai lu quelque part sur Stack Overflow pour 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 racine, puis le style CSS dans l'application racine CSS (app.component.css) et supprimé le style CSS des fichiers CSS des composants individuels. 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 leur permettre d'accéder au fichier CSS global?

cssangularangular-cli
44
dandev91

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

26
Abraham

Écrivez simplement vos styles globaux dans votre fichier src/styles.css. Ce fichier sera ajouté à styles.bundle.js lorsque vous exécuterez ng build.

Si vous souhaitez ajouter davantage de 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 qui est styles.css (ou src/styles.css dans Angular 6). Vous pouvez même inclure des fichiers .scss.

Utiliser SCSS

Si vous souhaitez utiliser SCSS, remplacez simplement l'extension de votre fichier src/styles.css par .scss, puis indiquez le changement dans votre fichier .angular-cli.json (ou angular.json in 6+) comme suit: Eh bien, en modifiant l’entrée dans le tableau styles.

Rendre Angular utiliser SCSS par défaut

Lors de la création de composants, vous souhaitez que Angular crée des fichiers de styles .scss au lieu de .css. Voici comment:

Angulaire 7

À partir de Angular 7, lorsque vous créez une application avec ng new appname, vous serez invité à indiquer le format de feuille de style que vous souhaitez utiliser. Vous n'avez donc qu'à choisir 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 fichier angular.json (( source ):

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

Angulaire 4 et inférieur

Localisez-le à la fin de votre fichier .angular-cli.json et modifiez la valeur de styleExt en scss:

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

Vous pouvez utiliser:

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

enter image description here

2
Ahmad Aghazadeh