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
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
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!