I try to overwrite some default variables with my own values.
To do this, I'm using the demo code from the Bootstrap docs:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../bootstrap/scss/functions";
// 2. Include any default variable overrides here
// Default variable overrides
$body-bg: #000;
$body-color: #111;
$table-cell-vertical-align: middle;
// 3. Include remainder of required Bootstrap stylesheets
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@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 include utilities API last to generate classes based on the Sass map in `_utililies.scss`
@import "../bootstrap/scss/utilities/api";
// 6. Add additional custom code here
The overwrite works for the $body-bg and $body-color.
But the change in $table-cell-vertical-align has no effect.
I also saw an answer which points out the importance of the order. But as I see it, the order in my file is correct.
And even if I put $table-cell-vertical-align at the end of the file it doesn't work.
Do I miss something?
It doesn't look like you're importing the ../bootstrap/scss/tables file.