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

CommentFileSizeAuthor
#10 3311233-10.patch213.46 KBrajab natshah
#2 3311233-1.patch99.88 KBredwan jamous

Comments

RedwanJamous created an issue. See original summary.

redwan jamous’s picture

redwan jamous commented
StatusFileSize
new 3311233-1.patch99.88 KB
rajab natshah’s picture

rajab natshah
he/him
commented
Title: Change the way of using Bootstrap variables. » Change the way of using Bootstrap variables
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: redwan jamous » Unassigned
Status: Active » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Title: Change the way of using Bootstrap variables » Change the way of using Bootstrap 4 variables
Related issues: +#3321160: Allow override Bootstrap 5 variables

Linked to #3321160: Allow override Bootstrap 5 variables

rajab natshah’s picture

rajab natshah
he/him
commented

The Varbase Technical Team agreed to switch to the new better way for Bootstrap 4 and Bootstrap 5

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Needs work

Thanks to @Abdullah Yassin for the link and logic for Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Doing that for sure

  • Needs to update the Vartheme BS4 and the VARTHEME_BS4_SUBTHEME template too
  • Re-compile both
rajab natshah’s picture

rajab natshah
he/him
commented

The patch fix dose not apply, Please create a new MR for this issue, with many thanks.

  • Needs to update the Vartheme BS4 and the VARTHEME_BS4_SUBTHEME template too
  • Re-compile SASS for both the theme and sub-theme
rajab natshah’s picture

rajab natshah
he/him
commented

Only having $enable-responsive-font-sizes: true;

To changes for https://github.com/twbs/bootstrap/blob/v4.6.2/scss/_variables.scss

rajab natshah’s picture

rajab natshah
he/him
commented
StatusFileSize
new 3311233-10.patch213.46 KB

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: Unassigned » mohammed j. razem
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: +varbase-9.0.11, +vartheme_bs4-9.0.21
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: mohammed j. razem » Unassigned
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Fixed
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released vartheme_bs4-9.0.21

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released varbase-9.0.11

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.