Menu icon Foundation
'foundation build' gives different results than 'foundation watch'

I've been developing my site using "foundation watch" and everything looks fine and works fine. 

But when I run "foundation build" I get some error messages (don't know if they are serious) and the final site doesn't function correctly. 

Specifically, I have a dropdown menu on large screens that changes to an accordion menu on small screens. This works fine on the "watch" version. But on the production version the horizontal menu with vertical dropdowns doesn't have any small arrows, and the vertical dropdowns appear beside, not under, the menu links. 

And on small screens, the accodrion has a transparent background that it doesn't have on the watch version. 

Also, I have a slideshow using slick.js, and again the styles work fine on the watch version, but are all messed up on the build version. The error messages I get during building are as follows, but I'm not sure those are the issues as it seems to be more about the scss. 

TypeError: 'null' is not an object (evaluating 'cdiv.style')

  http://fp1.formmail.com/fm_captcha.js:28
ReferenceError: Can't find variable: jQuery

  http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js:17
  http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js:18
ReferenceError: Can't find variable: $

  file:///C:/wamp/www/ww0/src/partials/slideshow-slick-bottom.html:3
[13:30:07] Finished 'javascript' after 2.57 min

Any ideas on how to track down the differences between "watch" and "build"? It's very tricky to debug because any change then needs a 4 minute build process to see the effect. 

foundation 6F6productionbuildfoundation build

I've been developing my site using "foundation watch" and everything looks fine and works fine. 

But when I run "foundation build" I get some error messages (don't know if they are serious) and the final site doesn't function correctly. 

Specifically, I have a dropdown menu on large screens that changes to an accordion menu on small screens. This works fine on the "watch" version. But on the production version the horizontal menu with vertical dropdowns doesn't have any small arrows, and the vertical dropdowns appear beside, not under, the menu links. 

And on small screens, the accodrion has a transparent background that it doesn't have on the watch version. 

Also, I have a slideshow using slick.js, and again the styles work fine on the watch version, but are all messed up on the build version. The error messages I get during building are as follows, but I'm not sure those are the issues as it seems to be more about the scss. 

TypeError: 'null' is not an object (evaluating 'cdiv.style')

  http://fp1.formmail.com/fm_captcha.js:28
ReferenceError: Can't find variable: jQuery

  http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js:17
  http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js:18
ReferenceError: Can't find variable: $

  file:///C:/wamp/www/ww0/src/partials/slideshow-slick-bottom.html:3
[13:30:07] Finished 'javascript' after 2.57 min

Any ideas on how to track down the differences between "watch" and "build"? It's very tricky to debug because any change then needs a 4 minute build process to see the effect. 

bill over 3 years ago

Ok. I've tracked it down to UnCSS. Commenting that out of the gulpfile seems to allow the site to build without issues. 

Looks like UnCSS is incorrectly pruning some necessary css. I'll follow up on UnCSS, but if anyone has any ideas then I'd appreciate it. 

FYI, I don't think the error messages I posted above are relevant, as those seem to be JS errors, but if anyone has any light to shed on those and whether I should be worried about them, that'd be appreciated too. 

bill over 3 years ago

Seems likely to be related to this: 

ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors:

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}

.selector2 {
    /* this will NOT be ignored */
}

https://github.com/giakki/uncss