Attempting to customize default variables by replacing them with my own values.
Utilizing the example code provided in the Bootstrap documentation:
// 1. Begin by importing functions first (for manipulating colors, SVGs, calc, etc)
@import "../bootstrap/scss/functions";
// 2. Add any overrides for default variables here
// Default variable overrides
$body-bg: #000;
$body-color: #111;
$table-cell-vertical-align: middle;
// 3. Include the remaining necessary Bootstrap stylesheets
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";
// 4. Include optional Bootstrap CSS as required
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/containers";
@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/helpers";
// 5. Optionally import utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../bootstrap/scss/utilities/api";
// 6. Here is where additional custom code can be added
The customization successfully alters $body-bg and $body-color.
However, changing $table-cell-vertical-align does not take effect.
I came across an answer emphasizing the importance of order. Yet, I believe the order in my file is correct.
Even when placing $table-cell-vertical-align at the end of the file, it remains ineffective.
Could I be overlooking something?