Bootstrap SASS Variables; Custom Values No Longer Overriding Default Values

[aaronskiba]

Please complete the following fields as applicable:

What version of the DMPRoadmap code are you running? (e.g. v2.2.0)

• v4.1.0 Expected behaviour:
• Overriding a Bootstrap variable within 4.0.2+portage-4.0.2:

// app/assets/stylesheets/variables/_bootstrap.scss
$panel-border-radius: 8675309px !default;

// app/assets/stylesheets/application.scss
@import "variables/*";

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@debug '#{ "$panel-border-radius: " + $panel-border-radius }';

Terminal
DEBUG: $panel-border-radius: 8675309px

Actual behaviour:

• Overriding a Bootstrap variable within v4.1.0:

// app/assets/stylesheets/variables/_bootstrap.scss
$panel-border-radius: 8675309px !default;

// app/assets/stylesheets/application.scss
@use "variables";

@use "blocks";
@use "utils";

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@debug '#{ "$panel-border-radius: " + $panel-border-radius }';

Terminal
Debug: $panel-border-radius: 4px

[aaronskiba]

@use "variables"; results in our custom Bootstrap SASS variable only being accessible via variables.$panel-border-radius.

However, when we change @use "variables"; to @use "variables as *";

@use "variables" as *;

@use "blocks";
@use "utils";

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@debug '#{ "$panel-border-radius: " + $panel-border-radius }';

Our custom value once again overrides the Bootstrap default value:

Terminal
Debug: $panel-border-radius: 8675309px

[aaronskiba]

The code below comes from v4.1.0 app/assets/stylesheets/application.scss

// Import locally defined variables. Load this before 'bootstrap'

@use "variables";

@use "blocks";
@use "utils";

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";

Changing @use "variables"; to @use "variables" as *; re-enabled our overriding of bootstrap variables. However, neither @use "x"; nor @use "x" as *; re-enables our customisations within blocks/ and utils/.

[aaronskiba]

// app/assets/stylesheets/variables/_typography.scss
$font-family: 'Montserrat', 'Ubuntu', Arial, sans-serif;

// app/assets/stylesheets/blocks/_accessibility.scss
body, .tooltip, .popover {
  font-family: $font-family;
}

// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss
body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
  background-color: $body-bg;
}

@use "variables" as *;

@use "blocks/accessibility" as *;

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";

@use "variables" as *;

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
@import "blocks/accessibility";

[aaronskiba]

// app/assets/stylesheets/variables/_bootstrap.scss
$panel-border-radius: 8675309px !default;

@use "variables" as *;

// Pull in the webpacker managed copy of Bootstrap Stylesheets
@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
@import "blocks";

With @import "blocks";, we lose our custom bootstrap overrides and we also lose the custom changes we had when we simply used @import "blocks/accessibility";.

[lagoan]

@aaronskiba to close ticket with latest changes