How to add custom CSS files globally for angular 6 project

Question

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.

Answer 1

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.

Answer 2

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.