Custom Bootstrap Sass build with Angular CLI

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";
Advertisements

5 thoughts on “Custom Bootstrap Sass build with Angular CLI

  1. ERROR in multi styles
    Module not found: Error: Can’t resolve ‘C:\TestNG\ted-project\node_modules\bootstrap\bootstrap.scss’ in ‘C:\TestNG\ted-project\node_modules\angular-cli\models’
    @ multi styles

  2. do I replace
    “styles”: [
    “../node_modules/bootstrap/dist/css/bootstrap.css”,
    “styles.scss”
    ],

    with

    “styles”: [
    “../node_modules/bootstrap/scss/bootstrap.scss”,
    “styles.scss”
    ],

    as this does not work!

    please advise

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s