Including the Sass partials for the used components only
In this section, we will see how we can optimize our compiled CSS by only including the Bootstrap 5 Sass partials that are actually used by the components in our HTML code. On the website that we created earlier in this book, we have used all of the Bootstrap 5 components except for the Placeholder, Popover, and Scrollspy components. Scrollspy is a JavaScript-only component, so we will remove the Sass partials belonging to the Placeholder and Popover components. In our styles.scss
file, we have a long list of // Optional Bootstrap CSS
, which among other things contains the Sass partials for all components. So, this is where we want to carefully consider which partial files we can remove. In the following code snippet, you will see the long list of // Optional Bootstrap CSS
where the lines that import the Sass partials for the Placeholder and Popover components have been commented out. You could also choose to delete those lines...