How to optimise bootstrap to avoid rendering unused css code

Question

We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way.

Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page.

We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.

The question:

How can we setup our environment to make the bootstrap sass code to output clean and non-redundant css code?

Details:

1. Bootstrap loads its own _buttons.scss file
2. We are loading our own "theme" _buttons.scss file after bootstrap's one and we managed to have our css with higher specificity.
3. We run the sass code compiler (on node-sass)
4. The output css contains BOTH the bootstrap style and our own themed style for the buttons. (As an example, see the following screenshot)

As you can see our own button style is applied as intended but we still carry over the bootstrap original style.

---

We would like to have OUR STYLE ONLY rendered in the browser.

---

Update:

The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.

Sometimes these classes are necessary to override the bootstrap default styles.
We need to override not only the colours (which are customisable through the _variables.scss), but also some other css attributes.

We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.

I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in ./node_modules/.

Answer 1

Here's how you override Bootstrap (4.x) defaults.

Examine the source

First, look inside bootstrap.scss where you can see how the framework is built, component by component. You could, if you like, comment out optional components you don't need, to downsize Boostrap. But don't do that right now.

Next, look inside _variables.scss. Skim through this file and it should be clear that all customisable Bootstrap styles are defined here, including colors. Thus you can have your custom colors apply not just for buttons but throughout the whole framework. Again, you could start changing the variables you want here right now... but don't, for there is a Best Practice.

Create customisation file

Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy.

Add variable overrides

Now you can start copying variables you want to change. Note that variables in _variables.scss have the !default flag, which means they can be overridden elsewhere. For example if you want a different secondary color, you'll find it defined as $secondary, and so add it to myproject.scss with a new value:

$secondary: #dd5679;

Add as many variable overrides as you want.

Import Bootstrap

After that, import Bootstrap into the file. EITHER take bootstrap.scss wholesale:

@import "relative/path/to/bootstrap/bootstrap";

OR copy-paste the contents of bootstrap.scss, update the pathnames, and comment out the components you don't want:

@import "relative/path/to/bootstrap/functions";
@import "relative/path/to/bootstrap/variables";
@import "relative/path/to/bootstrap/mixins";
...
// @import "relative/path/to/bootstrap/popover";
// @import "relative/path/to/bootstrap/carousel";
@import "relative/path/to/bootstrap/utilities";
@import "relative/path/to/bootstrap/print";

The first 3 imports, "functions", "variables" and "mixins" are core and not optional components; don't exclude them.

Add project styles

After that, add your own styles. If you have a significant amount, organise them into their own partial files e.g. _mybuttons.scss (start names of partial files with an underscore), and import them.

@import "mybuttons";

Your custom Bootstrap source file is now ready.

Compile to CSS

The resulting myproject.css file is what you want to load instead of the original Bootstrap CSS file.