web-dev-qa-db-fra.com

Ho pour ajouter des fichiers CSS personnalisés globalement pour le projet angular 6

Dans le fichier angular.json si j'ajoute

"styles": [
  "src/styles.css",
  "src/utility/vendor/bootstrap/css/bootstrap.css",
  "src/utility/vendor/font-awesome/css/fontawesome-all.min.css",
  "src/utility/vendor/animate.css/animate.min.css",
  "src/utility/vendor/slick-carousel/slick/slick.css",
  "src/utility/css/front.css",
  "src/utility/css/codepen.css"
],

ces fichiers ne sont accessibles que pour le fichier index.html et non pas app.component.html ni aucun composant également D'autres composants ne sont même pas restitués avec le même contenu que index.html mais index.html fonctionne correctement. 

cssangularangular6
4
Ravi Bhushan

1: Configurez angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Importez directement dans src/style.css ou src/style.scss:

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

Alternative: CSS Bootstrap local Si vous avez ajouté le fichier Bootstrap CSS localement, importez-le simplement dans angular.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

ou src/style.css:

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

Personnellement, je préfère importer tous mes styles dans src/style.css car ils ont déjà été déclarés dans angular.json.

2
Ravi Bhushan

Tout fichier de style CSS ajouté au tableau de styles sur angular.json sera injecté dans index.html et sera globalement une classe toute ajoutée dans ces fichiers, vous pourrez l'utiliser dans n'importe quel composant.

une autre méthode consiste à ajouter manuellement le fichier de style à index.html. Ce travail est effectué si le fichier est hébergé sur cdn ou dans le dossier assets. 

1
malbarmawi