Partials

Bootstrap Sass source code is made of multiple .scss source files (see GitHub repo). They are classified into two types by purpose.

• Library target sources
  • bootstrap.scss
  • bootstrap.grid.scss
  • bootstrap.reboot.scss
• Partials - all others
  • Begins with underscore (e.g. _functions.scss)
  • Module files for library targets and/or other modules

You can use @import statement to use partials. You do not have to type underscores. But you ought to read source files and analize partial dependencies.

This page uses only limited features of Bootstrap styles. We can import just required Sass partials to optimize CSS (see below). Size is reduced from 150k to 42k (for Bootstrap 4.2.1).

// import required partials
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// import minimum partials used for this page
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/utilities/background";
@import "bootstrap/scss/utilities/borders";
@import "bootstrap/scss/utilities/spacing";