Angulaire 2 - Global fichier CSS

Est-il possible d'ajouter un global fichier CSS Angulaire 2?
Pour le moment j'ai de nombreux composants différents qui ont le même bouton style - mais chacun de ces composants ont leur propre fichier CSS avec le style. Ce qui est frustrant pour les changements.

J'ai lu quelque part sur un Débordement de Pile à 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é le ViewEncapsulation lignes dans le composant racine, puis on ajoute le style CSS à la racine de l'app CSS (app.composante.css) et retiré le style CSS à partir de composants individuels CSS fichiers, et il ne fonctionne pas.

Il y a sûrement un moyen d'ajouter un mondial de fichier CSS? Dois-je ajouter quelque chose à l'une des composantes de les faire accéder au global fichier CSS?

  • c'est la bonne façon de procéder. Il convient de travail. Lorsque vous dites qu'il ne fonctionne pas, que se passe t-il exactement ? Tous les sous-composant bouton-elle différente ? Quel est l'aspect d'un bouton si vous ajoutez un bouton dans votre application modèle de composant. A-t-elle le droit d'aspect ?
  • Le style global ne serait pas appliquée à tous.
  • Il fonctionne très bien ))
  • Ouais à l'aide de ViewEncapsulation.Aucun fonctionne réellement!
InformationsquelleAutor fila | 2016-10-26
  1. 26

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

    • J'ai complètement raté l'angle de 2 CLI crée et comprend un " styles.css' file mondial de la CSS dans le script index.html fichier. Je viens d'ouvrir le fichier pour voir "/* Vous pouvez ajouter les styles globaux de ce fichier, et également importer d'autres fichiers de style */". Grâce axl_80.
    • Votre accueil, je suis content de savoir que je pourrais vous aider. Bonne chance dans votre projet 😉
    • un exemple de code serait sympa
    • Que faire si il n'existe pas de fichier html. Je suis entrain de créer un Angulaire de la bibliothèque.
    • Je ne pense pas que vous devriez utiliser le css dans une bibliothèque.
    InformationsquelleAutor Abraham
  2. 70

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

    Si vous désirez ajouter plus de fichiers de style, vous pouvez le faire dans votre .angular-cli.json (ou angular.json Angulaire 6+) fichier. Dans ce fichier, vous verrez un tableau appelé styles, avec un seul élément par défaut, ce qui est styles.css (ou src/styles.css Angulaire 6). Vous pouvez même inclure .scss fichiers.

    À l'aide de SCSS

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

    Faire Angulaire utilisation SCSS par défaut

    Lors de la création de composants, vous souhaitez Angulaire de créer .scss styles de fichiers au lieu de les .css. Voici comment:

    Angulaire 7

    À partir de Angulaire 7, lorsque vous créez une application avec ng new appname, vous serez invité qui feuille de style au format que vous souhaitez utiliser, il vous suffit de choisir SCSS (source). Il semble ici se termine la nécessité de configurer manuellement Angulaire d'utiliser SCSS.

    Angulaire 6

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

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

    Angulaire 4 et inférieur

    Trouver ce d'ici à la fin de votre .angular-cli.json fichier et modifier la valeur de styleExt à scss:

    "defaults": {
  "styleExt": "css",
  "component": {}
}
    • C'est un ajout important à cette question - comme il est plus pertinent avec les nouvelles versions de Anguleux. J'ai récemment créé un nouveau projet avec une nouvelle installation de l'Angulaire de la CLI et de l' (par habitude) manuellement inclus le CSS à l'importation (selon la réponse choisie dans cette question) qui conduit à une erreur dans le navigateur de la console. Une fois que j'ai enlevé le manuel CSS instruction d'importation dans le code HTML, j'ai remarqué que le style CSS de styles.le css a été appliquée. C'est dommage je n'ai pas vu cette réponse avant de démarrer un nouveau projet...
    • cela devrait être la bonne réponse
    • Au moment de cette question, ce n'était pas la bonne réponse si. Puis-je mettre à jour la "bonne réponse" pour accueillir la mise à jour Angulaire? Techniquement la question à Angulaires 2...
    • Que faire si vous n'êtes pas en utilisant angulaires-cli Angulaire 4?
    • J'ai été en mesure de simplement ajouter "../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css" à mon .angular-cli.json semble bien fonctionner.
    • la question n'a pas de version angulaire spécifié. Je vous recommande de changer la réponse à celui-ci pour mieux aider les futurs développeurs, et si plus de changements dans l'avenir, essayez de garder vos quesions up-to-date. DONC, il serait encore plus utile si tout le monde devait le faire!
    • Depuis l'application de la composante est la composante principale, vous pouvez ajouter plusieurs styles. Comme: styleUrls: ["styles1.css", "styles2.css"],

    InformationsquelleAutor Parziphal
  3. 0

    Vous pouvez utiliser:

    1. Ajouter principale.css
    2. Ouvrir les styles.css dans le dossier principal
    3. Ajouter cette ligne (@import 'principale.css';)

    Angulaire 2 - Global fichier CSS

    InformationsquelleAutor Ahmad Aghazadeh