Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing styles on build:production when using Bootstrap 4 navbar #2017

Closed
Giovanni-Mattucci opened this issue Jan 25, 2018 · 13 comments

Comments

Projects
None yet
@Giovanni-Mattucci
Copy link

commented Jan 25, 2018

Submit a feature request or bug report


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

This comment has been minimized.

Copy link

commented Jan 25, 2018

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

This comment has been minimized.

Copy link

commented Jan 26, 2018

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

This comment has been minimized.

Copy link
Author

commented Jan 26, 2018

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: twbs/bootstrap#25211

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

@QWp6t

This comment has been minimized.

Copy link
Member

commented Jan 28, 2018

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

This comment has been minimized.

Copy link

commented Feb 1, 2018

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

@webberwang

This comment has been minimized.

Copy link

commented Feb 4, 2018

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

@Giovanni-Mattucci Giovanni-Mattucci changed the title Bootstrap 4 CSS causes loss of SCSS running build:production Bootstrap 4 CSS error when minifying with webpack, causes loss of SCSS running build:production Feb 5, 2018

@weilinzung

This comment has been minimized.

Copy link

commented Feb 10, 2018

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

Bootstrap 4.0.0

@nacm

This comment has been minimized.

Copy link
Contributor

commented Feb 11, 2018

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

This comment has been minimized.

Copy link

commented Feb 15, 2018

@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

This comment has been minimized.

Copy link

commented Feb 18, 2018

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

This comment has been minimized.

Copy link

commented Feb 18, 2018

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

@SeanMee86

This comment has been minimized.

Copy link

commented Feb 21, 2018

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

@retlehs

This comment has been minimized.

Copy link
Member

commented Feb 21, 2018

please follow @QWp6t's solution above

@roots roots locked and limited conversation to collaborators Feb 21, 2018

@retlehs retlehs added the bug label Apr 25, 2018

@retlehs retlehs changed the title Bootstrap 4 CSS error when minifying with webpack, causes loss of SCSS running build:production Missing styles on build:production when using Bootstrap 4 navbar May 17, 2018

@MWDelaney MWDelaney closed this in e72b490 Sep 17, 2018

ptrckvzn added a commit to ptrckvzn/sage that referenced this issue Sep 18, 2018

Merge branch 'master' into coriander
* master: (64 commits)
  9.0.5
  Update comment [ci skip]
  Workaround for Bootstrap incompatibility with webpack. Fixes roots#2017
  Force `illuminate/support` to `5.6.*`
  9.0.3
  Revert "Add searchform partial and function to replace default WordPress functionality"
  Unescape get_language_attributes()
  Revert "Final filter that renders template should have PHP_INT_MAX priority."
  $comments_template fix
  Patreon
  Final filter that renders template should have PHP_INT_MAX priority.
  Add data from controller to comments template
  9.0.2
  Update dependencies
  Update to Bootstrap 4.1.3
  Bump sage-installer
  Fix
  Update composer.json
  UglifyJs: Change the ecma option from 8 to 5
  Use smartStrategy to replace loaders with preset (roots#2084)
  ...
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.