Change the way of using Bootstrap 4 variables

Created on 22 September 2022, about 2 years ago
Updated 22 January 2023, almost 2 years ago

Problem/Motivation

Updating Bootstrap library requires copying the new variables from node_modules/bootstrap/scss/_variables.scss to scss/bootstrap-variables.scss which can be avoided.

Steps to reproduce

Given I have Vartheme_bs4 installed with Bootstrap 4.6.1,
And I already created a subtheme and changed the values of some variables in scss/bootstrap-variables.scss,
When I upgrade Bootstrap to 4.6.2 and try to compile scss files,
Then I get an error that $transition-collapse-width variable is undefined and that's because we are trying to compile the new Bootstrap scss files -which use this new variable- without adding it to scss/bootstrap-variables.scss.

Proposed resolution

Import Bootstrap variables from node_modules/bootstrap/scss/_variables.scss right after importing scss/bootstrap-variables.scss and remove non-customized variables from scss/bootstrap-variables.scss, this will allow any new variables to be used when compiling scss files, and will still allow us to customize variables by adding the variable name and its custom value to scss/bootstrap-variables.scss.

Thanks to "!default" keyword used with all variables in Bootstrap, we can import the file with the custom values before the original variables file.
For additional info please refer to this article and this question.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-9.0.11 , vartheme_bs4-9.0.21

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

Feature request
Status

Fixed

Version

9.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024