Roots Discourse

Removing Bootstrap 4 SCSS in Sage 9

I typically don’t use all of the CSS in Bootstrap 4, and like to carve out as much as I can. What is the proper way to alter which SCSS includes are pulled in?

I suggest you to use PurgeCSS.
Check this tutorial: https://roots.io/guides/removing-unused-css-with-purgecss-uncss-in-sage/

That looks like a broad solution designed to solve a different issue. In any other framework I’ve used that had Bootstrap, there was some version of altering the SCSS file that does all the imports. What is Sage using to list out all the Bootstrap partials it pulls in?

Specifically, I’m referring to doing the following. Altering the file with this in the Bootstrap that comes in node_modules did not seem to be the right way to do it…

/*!

@import “~bootstrap/scss/functions”;
@import “~bootstrap/scss/variables”;
@import “~bootstrap/scss/mixins”;
@import “~bootstrap/scss/root”;
/* @import “reboot”; /
@import “~bootstrap/scss/type”;
@import “~bootstrap/scss/images”;
/
@import “code”; /
/
@import “grid”; /
/
@import “tables”; /
@import “~bootstrap/scss/forms”;
@import “~bootstrap/scss/buttons”;
@import “~bootstrap/scss/transitions”;
@import “~bootstrap/scss/dropdown”;
/
@import “button-group”; /
/
@import “input-group”; /
/
@import “custom-forms”; /
@import “~bootstrap/scss/nav”;
@import “~bootstrap/scss/navbar”;
/
@import “card”; /
@import “~bootstrap/scss/breadcrumb”;
/
@import “pagination”; /
/
@import “badge”; /
/
@import “jumbotron”; /
/
@import “alert”; /
/
@import “progress”; /
/
@import “media”; /
/
@import “list-group”; /
/
@import “close”; /
/
@import “toasts”; /
/
@import “modal”; /
/
@import “tooltip”; /
/
@import “popover”; /
@import “~bootstrap/scss/carousel”;
/
@import “spinners”; /
@import “~bootstrap/scss/utilities”;
/
@import “print”; */

@import “~bootstrap/scss/utilities”;

Take a look in app/resources/assets/styles/autoload/_bootstrap.scss.

@import "~bootstrap/scss/bootstrap";

Sage is just importing that file, which contains all the partials. I’m not sure what the proper method of doing this, but I would start by commenting out/deleting that @import and adding all the partials in my main.scss file.

I wrote a blog about this subject some days ago. If you follow my guide, you will be able to carve some kb off your CSS & JS. Check it out:

2 Likes