Use Bootstrap 4 in Angular 4

Question

I wonder why I need to import my bootstrap file in styles.css in Angular. Do you really need to do it like this to make Bootstrap 4 work in Angular 4? I tried not importing it to styles.css and it doesn't work but it works when I imported it. Unlike bootstrap 3 where you don't need to import it to styles.css but just declare it angular.cli.json and it works fine.

//styles.css
@import "~bootstrap/dist/css/bootstrap.min.css";



//.angular.cli.json
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

Answer 1

When you specify the global styles like

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

as a result the file styles.bundle.js gets generated and injected in to index.html like

<script type="text/javascript" src="styles.bundle.js"></script>

Then if you have any issues with global styles like e.g styles is missing you need to check file styles.bundle.js to see if your styles actually get placed in. One of the reasons they could be missing is because of the wrong path, which it seams to be quite right in your case.

If you still stuck after all you need to make sure that your browser is not loading anything from the cache so just press ctrl+f5 or clean up the cache or open incognito window to make sure nothing is loaded form the cache.