milohuang / reverie

Reverie is a versatile HTML5 responsive WordPress framework based on ZURB's Foundation.
http://theakiba.com/reverie/
MIT License
919 stars 196 forks source link

Compass Compiling Issue #321

Open angsmith opened 8 years ago

angsmith commented 8 years ago

I took an exact replica of this website (using BackupBuddy) & installed it locally to start working on via MAMP. It looked completely fine when I first ran it locally.

screen shot 2015-09-03 at 4 50 28 pm

As soon as I run 'compass watch' though, something breaks, resulting in the local site looking like this:

screen shot 2015-09-03 at 4 53 04 pm

I know this is almost impossible for you to debug without seeing a live version, but is there anything obvious from this that could be causing the issue? It seems that the default Foundation's CSS (for the top bar, components etc) are not being loaded.

angsmith commented 8 years ago

I've looked further to compare the 2 sites and it seems that app.scss is just not being compiled properly locally. On the remote (correct) version, this file has 6589 lines. However, locally, this file has 806 lines and I see that there are no styles for the grid columns etc.

jamzth commented 8 years ago

What exactly is the difference between the app.scss of the local and remote? Correct the difference and compile. The scss files are the files being compiled, so I'm a little confused how the origin files aren't the main issue. Once you get all the scss files right and compile, it'll be all good. Maybe I'm misunderstanding?

Grace and Peace,

James Hammack

On Sep 3, 2015, at 02:09, angelasmith notifications@github.com wrote:

I've looked further to compare the 2 sites and it seems that app.scss is just not being compiled properly locally. On the remote (correct) version, this file has 6589 lines. However, locally, this file has 806 lines and I see that there are no styles for the grid columns etc.

— Reply to this email directly or view it on GitHub.

GarySwift commented 8 years ago

I'm having the exact same issue. I have created several live sites using reverie and many test sites without issue.

However, 'compass watch' is now now compiling the scss incorrectly. Two of my local sites look like the second screenshot above. The only way I get them looking correct is by FTPing into remote site and getting the old css files.

Anyone got any ideas on this?

angsmith commented 8 years ago

I think it has something to do with bower. Basically, the core foundation SCSS (located in bower_components) are not being compiled. Is there something in particular that we could be missing? We shouldn't have to touch the foundation core files.

GarySwift commented 8 years ago

At @angsmith, yes, at first I suspected the foundation files inside bower_components could be corrupted so deleted everything from there and and ran bower install instead. This still didn't resolve the issue.

But you are correct, we shouldn't have to touch anything inside bower_components as it is outside version control.

GarySwift commented 8 years ago

OK, this issue seems to be resolved for me now. I didn't do anything to fix it but 'compass watch' is is now compiling my sass correctly.

I'm going to proceed with caution and sync the remote css as I go. I will comment back here if this issue occurs again.

catchlightWeb commented 8 years ago

I'm having the same issue and it should be easy enough to replicate for anyone. Wordpress 3.4.1, Reverie 5.0.0

A Diff between the original Reverie style.css and the processed CSS after I do my first "compass watch" reveals the following. The original has about 178 lines of css code that starts off...

meta.foundation-version {
  font-family: "/5.2.3/";
}

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em;
}
etc
etc

After processing this is replaced by the 436 lines of css that starts off ...

   /* small displays */
@media only screen {
  .show-for-small-only, .show-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .show-for-xxlarge-down {
    display: inherit !important;
  }

Any ideas?

angsmith commented 8 years ago

Have you tried reinstalling bower / running bower install & bower update ?

This seemed to solve the issue for me.

catchlightWeb commented 8 years ago

Thanks Ang Smith, that seems to have fixed things. :)