Sage: Missing styles on build:production when using Bootstrap 4 navbar

[Giovanni-Mattucci]

Submit a feature request or bug report

• [x] I've read the guidelines for Contributing to Roots Projects
• [x] This is a bug report
• [x] This request isn't a duplicate of an existing issue
• [x] I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• [x] This is not a personal support request that should be posted on the Roots Discourse forums

---

What is the current behavior?
Any SCSS added after the autoload of bootstrap 4 is not applied after running yarn run build:production.

$navbar-dark-toggler-icon-bg and $navbar-light-toggler-icon-bg cannot be minified correctly, and webpack encounters a syntax error.

Error is not encountered when using yarn run build as no minification happens. The new styles are present since no syntax error is encountered.

This fails silently, unless disabling postcss-safe-parser which then shows an error in the console (see below).

I removed all styles except for Bootstrap's styles and added a style before and after, the style after bootstrap is included is omitted on production build.. Before bootstrap is visible on production build.

What is the expected or desired behavior?
Expected that updates to scss files would reflect in production minified css output, and minify without error.

---

Bug report

Please provide steps to reproduce, including full log output:

• Use Bootstrap 4.0.0
• Add sass styles after the autoload of Boostrap @import "./autoload/**/*";
• Run yarn run build:production
• Observe that the sass styles are omitted from the output
• Set parser: undefined in the postcss.config.js file.
• Observe Syntax Error:

 at runLoaders (C:\wamp64\www\new-template\wp-content\themes\new-template\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\wamp64\www\new-template\wp-content\themes\new-template\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\wamp64\www\new-template\wp-content\themes\new-template\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (C:\wamp64\www\new-template\wp-content\themes\new-template\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (C:\wamp64\www\new-template\wp-content\themes\new-template\node_modules\postcss-loader\lib\index.js:189:44)
    at <anonymous>

 @ multi ./scripts/main.js ./styles/main.scss

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: Syntax Error

(4927:59433) Unclosed block

Please describe your local environment:
Bootstrap Version: 4.0.0

WordPress version: 4.9.2

OS: Windows 10

NPM/Node version: 8.9.1 64-bit

Where did the bug happen? Development or remote servers?
Development

[mmoscher]

yep, same here.
Even seems to occur when running yarn start, i.e. hot replacement, since any new added SCSS is not visible. Thus it seems that the yarn run build is the only correct configured job ... i'll try do dig deeper tomorrow.

[exippy]

Hi there,
The error seems to come from the $navbar-dark-toggler-icon-bg and $navbar-light-toggler-icon-bg variable definition.
each of those variables are originally declared this way:
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
overriding those in your _variables.scss and redeclaring the .navbar-toggler-icon in your scss files serves as a fix.
Hope this helps someone to figure out a proper webpack configuration

[Giovanni-Mattucci]

Thanks @exippy for finding the problem source. Now that I know what the root problem is, I found this related ticket on Bootstrap's issues: https://github.com/twbs/bootstrap/issues/25211

Perhaps has to do with webpack production minification implementation? I think webpack uses cssnano for its minification.

[QWp6t]

resources/assets/styles/common/_variables.scss

$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

That should be a sufficient workaround for now.

[a2nt]

Guess Bootstrap 4 needs better documentation at Getting started>Webpack section describing how to set everything up and describe compatible minifiers

[webberwang]

I noticed this too, everything was loading good during local development when using yarn start. But once I push to production with yarn build:production, loading Bootstrap 4 would somehow make all my SCSS not included.

Thanks @QWp6t for the solution! Saved me lots of time

[weilinzung]

Same, any new styles add toSCSS file would not compile to production build.

Bootstrap 4.0.0

[nacm]

I had a similar issue with font awesome (v4.7.0). When I removed font awesome from autoload the yarn build:production works fine. Otherwise only bootstrap is included in the main.css, and nothing else added to main.css

[fradelo]

@nacm declare $fa-font-path before @import and it will work fine

// Import Font Awesome from node_modules
$fa-font-path: "../../../node_modules/font-awesome/fonts" !default;

@import "~font-awesome/scss/font-awesome";

[sandrowuermli]

A 'Clean' Workaround

TL;DR

1.
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";

2.
In Your styles/common/_variables.scss insert:

$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='#{str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29")}' 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='#{str-replace(str-replace(#{$navbar-light-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

---

Detail

The Problem aren't the spaces. The brackets from the stroke='#{$navbar-dark-color}' causes the problem. So if we str-replace() the ( with %28 and the ) with %29 you can run yarn run build:production without removing your scss.

[chrishough]

I am having the same issue and had to extract the variables out of the boostrap module 😢

[SeanMee86]

@sandrowuermli This gave me back the toggler icon, but then broke production again...

[retlehs]

please follow @QWp6t's solution above