Comment ajouter des fichiers CSS à l'aide de l'interface CLI angulaire?

Question

Je veux ajouter un peu de style de fragment à mon application Angular 2, des choses comme les polices et les schémas de couleurs qui seront utilisés partout. Dans le passé, je l'ai toujours fait en ajoutant une étiquette comme celui-ci à ma page d'index:

<link rel="stylesheet" href="css/framework.css" /> 

Cela ne fonctionne pas avec ce que le CLI utilise pour servir l'application. J'ai essayé d'ajouter manuellement les fichiers CSS dans le dossier dist après la construction, mais cela ne semble pas fonctionner non plus.

J'ai aussi essayé d'ajouter le code CSS dans le dossier anugular-cli-build.js comme celui-ci

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'css/*.css' 
    ] 
    }); 
}; 

Il ne semble toujours pas construire les fichiers dans le dossier css quand je dis à construire.

La feuille de style en question est censée être les styles de ligne de base pour l'ensemble de l'application et non quelque chose que je souhaite inclure dans la balise styleUrl.

Answer 1

La configuration vendorNpmFiles sert à indiquer à la version cli quelle node_modules copier dans le répertoire dist.

J'ai été capable de créer simplement un répertoire 'resources' dans mon répertoire src, y mettre mon fichier css à l'échelle de l'application, et il a été copié sur la construction dist sans autre configuration.

src 
|- app 
| | 
| 
|- css 
| | 
| |- framework.css 
| 
|- index.html 

Si vous essayez d'inclure un cadre comme bootstrap, alors oui, vous pouvez utiliser la configuration vendorNpmFiles pour le copier depuis votre node_modules:

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'bootstrap/dist/**/*', 
     ... 
    ] 
    } 
} 

Ensuite, votre référence dans votre index.html serait:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

Answer 2

Depuis les fichiers que vous faites référence (c.-à-[framework-x].css) sont statiques, vous pouvez utiliser e e public répertoire pour copier des fichiers directement dans le dossier dist sans aucune configuration supplémentaire.

en fonction de votre inclusion:

src 
|-- public 
| |-- framework-x.css 

votre fichier sera déplacé dans le répertoire dist comme ceci:

dist 
|-- framework-x.css 

Vous pouvez donc faire référence à index.html directement.

Answer 3

Dans la dernière ng cli ajoutant simplement les styles et les scripts nécessaires comme ci-dessous dans « .angular-cli.json » exposeront en bundle automatiquement

"apps":{ 
"styles": [ 
     "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css", 
     "styles.css" 
     ], 
    "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 
}