11

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.

4
  • anything u declare in styles.css under src folder is global Commented Aug 3, 2018 at 7:26
  • Your style.css should be at the very end of the list. Commented Aug 3, 2018 at 7:35
  • i know but i want other files to b separately global Commented Aug 3, 2018 at 7:36
  • Please extend your answer regarding the styles that are actually included in the rendered html page when you inspect it with dev tools. Commented Aug 3, 2018 at 7:38

2 Answers 2

8

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.

Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.