Importation de feuilles de style dans angular4

Essaie de mettre à jour mon projet de angular JS angulaire 4. J'ai des feuilles de style que j'ai utilisé dans angular JS projet.

C'est ma structure de dossier

Importation de feuilles de style dans angular4

J'ai créé composants à l'aide angulaire de la CLI.
Tout fonctionne parfaitement mais je ne sais pas comment utiliser mes styles angulaire 4 du projet.
Peut-on expliquer comment je peux utiliser mes styles à l'échelle mondiale? et aussi que dans certains composants?

OriginalL'auteur vivek v | 2017-09-22

  1. 12

    Vous pouvez ajouter des styles à l'intérieur de la angular-cli.json:

    "styles": [
  //Your styles go here
]

    C'est pour les styles globaux. Styles locaux (pour un certain composant) sont à l'intérieur de la concordante de CSS de fichier, qui appartient à votre composant, par exemple foo.composante.css. Par défaut, chaque composant a l'annotation suivante:

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

    Donc, foo.composante.css contient le CSS pour le composant FooComponent.

    Prendre un coup d'oeil ici:

    Comment puis-je ajouter .js fichier pour certaines components?
    Jetez un oeil par exemple, here ou here.
    Je sais que j'ai besoin d'importer mes .js fichiers dans .angular-cli.json > scripts: [ ... ], mais je veux utiliser mon .js scripts dans un seul composant...
    Peut-être vous pouvez poser une nouvelle question ici. Là, vous pouvez ajouter votre concordante de code et ainsi de suite. Cela pourrait être mieux que d'utiliser les commentaires.
    Oui, Vous avez raison. mais je pense que Vous connaissez la réponse... )

    OriginalL'auteur pzaenger

  2. 5

    En dehors de l'ajout du fichier css angulaires-cli.json comme indiqué par @pzaenger vous pouvez également l'ajouter à index.html la page de votre application, comme illustré ci-dessous :-

    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

    OU

    vous pouvez même importer dans un fichier CSS existant dans votre application en ajoutant les @import instruction dans la partie supérieure de ce fichier comme indiqué ci-dessous :-

    @import "~bootstrap/dist/css/bootstrap.min.css";

    De cette façon, vous pouvez également ajouter des CDN liens du fichier CSS qui ne peut pas être fait dans angulaires-cli.fichier json. Vous pouvez trouver un plus élaboré explication à ce lien.

    OriginalL'auteur yatharth varshney