CODEWITHSUNDEEP
cssangularangular6
Ravi Bhushan
Ravi Bhushan

Reputation: 191

How to add custom CSS files globally for angular 6 project

In angular.json file, if I add

"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"
],

these files are accessible only for index.html file, and not app.component.html or any component as well. Other components are not even being rendered with the same content of index.html, but index.html is working fine.

Upvotes: 11

Views: 12616

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

Any CSS style file added to styles array at angular.json will be injected to index.html and will be a globally this mean any class added in these files you can use it inside any component.

another way is to add style file manually to index.html this work if the file host on cdn or in the assets folder.

Upvotes: 2

Ravi Bhushan
Ravi Bhushan

Reputation: 191

1: Configure angular.json:

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

2: Import directly in src/style.css or src/style.scss:

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

Alternative: Local Bootstrap CSS If you added the Bootstrap CSS file locally, just import it in angular.json

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

or src/style.css:

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

I personally prefer to import all my styles in src/style.css since it’s been declared in angular.json already.

Upvotes: 8

Related Questions