Importing Bootstrap 5 files and custom styles

In Chapter 4, Bootstrap 5 Global Options and Colors, we learned about the bootstrap.scss file and that it contains all the code that will import the individual Sass partial files for the various elements of Bootstrap 5. We will use a slightly different order of these @import statements, which will make customization easier. We will also add @import statements for four of our own SCSS files, which we use to override variables (two files for this), define utilities, and add custom styles, in between the Bootstrap 5 @import statements.

The order of the @import statements is as follows:

• Required import of Bootstrap 5’s _functions.scss file
• Import of our own _default-variable-overrides.scss file, which is used for default variable overrides
• Required import of Bootstrap 5’s _variables.scss file
• Import of our own _variable-value-using-variable.scss file, which is used for overriding variable values with existing...