I am facing a challenge in grasping the concept of overriding or adding default variables without importing the entire Bootstrap library. The documentation for Bootstrap suggests two options: either importing everything or just the specific parts you require.
First option is to import all of Bootstrap:
// Custom.scss
// Option A: Include all of Bootstrap
// Define any default variable overrides here (functions won't be accessible)
@import "../node_modules/bootstrap/scss/bootstrap";
// Add any custom code here
The second option is to import only what you need.
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Start by including functions first (to manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Define any default variable overrides here
// 3. Proceed to include the rest of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include optional Bootstrap components as necessary
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Proceed with additional custom code here
The issue arises when attempting to override or add variables using the second option like this:
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (to manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Define any default variable overrides here
// Attempting to add extra spacer sizes
$spacer: 1rem;
$spacers: (
6: ($spacer * 5)
);
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as needed
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Proceed with additional custom code here
This approach does not yield the desired results. Alternatively, following the same process but with the first option, like so:
// Custom.scss
// Option A: Include all of Bootstrap
// Define any default variable overrides here (although functions are not available)
$spacer: 1rem;
$spacers: (
6: ($spacer * 5)
);
@import "../node_modules/bootstrap/scss/bootstrap";
// Include any custom code here
This method works, however, it involves importing the whole of Bootstrap. I am eager to discover how to achieve the second option--importing only necessary components while still having the flexibility to override variables. Please feel free to use the spacer example I mentioned if you have a solution.