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.

Please extend your answer regarding the styles that are actually included in the rendered html page when you inspect it with dev tools. — Giacomo Voß
– Giacomo Voß, Commented Aug 3, 2018 at 7:38

Ravi Bhushan · Accepted Answer · 2018-08-06 07:43:08Z

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.

Muhammed Albarmavi · Accepted Answer · 2018-10-08 11:06:49Z

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.

edited Oct 8, 2018 at 11:06

answered Aug 3, 2018 at 7:51

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Collectives™ on Stack Overflow

How to add custom CSS files globally for angular 6 project

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related