When a framework is new we all struggle to get things done right at first. From which function to use, to where to place the files, everything is part of the learning curve. And that’s why I wanted to share the best method I’ve found to use a custom build of the Bootstrap CSS, using Sass when developing an Angular 2 app with the awesome CLI.

My first thought was downloading the files to the assets folder, and although is a fine approach for the compiled CSS version, it doesn’t work right when we have to compile it because all the partials will be copied to the dist folder when building for production.

There has to be a better way and that’s relying on npm (or yarn) to install our dependencies.

$ npm install bootstrap@next

Once installed we still need Webpack to know about our files. So go to your node_modules, open the bootstrap directory, and inside of the scss folder find the bootstrap.scss file.

This is the main entry file for Bootstrap Sass and you can copy the whole content to your styles.scss. Another option would be to copy the file to the src directory and include it in the “styles” property of the angular-cli.json configuration.

In any case, you’ll need to point Webpack to the right direction prefixing all the import statements with the tilde (that will resolve to node_modules) and the “bootstrap/scss” path looking like @import "~bootstrap/scss/variables"; for each partial.

You don’t need the @import "custom"; because we’ll override default values setting the variables at the top of our styles.scss. For example, we can set $enable-flex: true; if we want to enable flexbox or $enable-hover-media-query: true; for the sticky hover on mobile.

This way we don’t need to modify source files and we can keep upgrading Bootstrap with npm without losing our customizations. And even better, you can remove any component import that you don’t use shrinking down the size of your bundle. I hope it helps!

/* You can add global styles to this file, and also import other style files */
$enable-flex: true;

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

// Reset and dependencies
@import "~bootstrap/scss/normalize";
@import "~bootstrap/scss/print";

// Core CSS
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";

// Components
@import "~bootstrap/scss/animation";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/tags";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/responsive-embed";
@import "~bootstrap/scss/close";

// Components w/ JavaScript
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";

// Utility classes
@import "~bootstrap/scss/utilities";