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

@tombro

That’s a helpful blog post. A couple of questions, though:

your-theme/resources/assets/styles/autoload/_bootstrap.scss
your-theme/resources/assets/scripts/autoload/_bootstrap.js

Are both partials getting auto loaded by:

your-theme/resources/assets/styles/main.scss
your-theme/resources/assets/scripts/main.js

In the header comment on the autoload files, is says it’s best not to edit them, since they could get overwritten. So I went upstream and put all the SCSS imports into the main.scss. This appears to work nicely. Doing the same on the js file throws an error, though.

Questions:
What made you choose to modify the auto loaded partials instead of the “main” files?

Any thoughts on getting the main.js imports to work?

Check out this thread and more specifically the fourth reply.

This topic was automatically closed after 42 days. New replies are no longer allowed.