I am currently customizing Bootstrap4 and facing challenges in understanding why certain elements are not functioning as anticipated.
When modifying the original _variables.scss file by adjusting the $font-size-base, ideally, it should reflect across related variables to prevent manual updates on multiple instances (e.g.
$h1-font-size: $font-size-base * 2.5To address this issue, I created a new file called _custom-variable.scss where I imported the necessary variables:
@import '../node_modules/bootstrap/scss/variables';
After changing $font-size-base: 1rem to $font-size-base: 0.875rem;, the compiled CSS for the body displays the correct font size adjustment:
// ../node_modules/bootstrap/scss/_reboot.scss
body {
...
font-size: $font-size-base;
...
}
// Compiled CSS
body {
...
font-size: 0.875rem;
...
}
However, the problem arises when targeting heading tags:
// Although I updated $font-size-base in my _custom-variable.scss file from 1rem to 0.875
// The expected changes for heading tags should be:
h1 { font-size: 2.1875rem }
h2 { font-size: 1.75rem }
...
h6 { font-size: .875rem }
// But the actual output remains unchanged
h1 { font-size: 2.5rem }
h2 { font-size: 2rem }
...
h6 { font-size: 1rem }
This discrepancy could be due to the calculation process specified within the Bootstrap's _vairables.scss file:
//../node_modules/bootstrap/scss/_variables.scss
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
...
$h6-font-size: $font-size-base !default;