Skip to content

Commit

Permalink
Workaround for Bootstrap incompatibility with webpack. Fixes #2017
Browse files Browse the repository at this point in the history
  • Loading branch information
@MWDelaney
MWDelaney committed Sep 17, 2018
1 parent 375b06a commit e72b490
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions resources/assets/styles/common/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,9 @@
$theme-colors: (
primary: #525ddc
);

/** Fix Bootstrap navbar incompatibility with webpack
* See https://github.com/roots/sage/issues/2017
*/
$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

2 comments on commit e72b490

@kennyeliason
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm kinda bummed, this doesn't actually fix "yarn build:production". It makes the mobile menu completely disappear, which isn't good at all...

@kennyeliason
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better fix: twbs/bootstrap#25211 (comment)

Relying on @sandrowuermli's comments:

In Your assets/styles/main.scss insert at the top of the file (yes, before @import "common/variables";, we need the functions for str-replace()):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

In Your styles/common/_variables.scss insert:

$new-navbar-dark-color: str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29");
$new-navbar-light-color: str-replace(str-replace(#{$navbar-light-color}, "(", "%28"), ")", "%29");

$navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$new-navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
$navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$new-navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

Detail
This fixes the failing compilation along with keeping the hamburger menu alive on mobile (and also passes stylelint validation).

Please sign in to comment.