Customizing Bootstrap for Angular

Configuring Bootstrap will let you customize the parts of the Bootstrap framework you include in your application. Loading fewer parts of Bootstrap will reduce your file size, thus, increasing the performance of compiling your Sass stylesheets.

Getting ready

Loading all of Bootstrap is great, but what if we don't want or need all of the Bootstrap framework in our Angular application? Let's remove all the built-in JavaScript components used by Bootstrap so that we can implement our own Angular-based versions instead.

How to do it...

We can customize exactly which Bootstrap files are loaded in our application by copying the contents of /node_modules/bootstrap/scss/bootstrap.scss and customizing their import paths so that they use our advanced sass-loader mechanism instead:

// Core variables and mixins
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/custom";

// Reset and dependencies
@import "~bootstrap/scss/normalize...