Laravel using Foundation 5 with Elixir, sass not compiling so page does not format

First time doing this. I am not able to see why I cannot correctly compile my sass Foundation files. My gulp commands executes with no errors, but my page does not format. If I replace my compiled css link in the <head> with links to the Foundation css files then it formats OK.

My gulpfile.js looks like this:

var elixir = require('laravel-elixir');

elixir.config.css.autoprefix.options.browsers = ['last 4 versions'];

elixir(function(mix) {

    // Compile CSS
    mix
        /* Copy the Foundation JS folder from bower_components to a js/foundation folder */
        .copy(
            'vendor/bower_components/foundation/scss', 'resources/assets/sass'
        )
        /* Copy the Foundation JS folder from bower_components to a js/foundation folder */
        .copy(
            'vendor/bower_components/foundation/js', 'resources/assets/js/foundation'
        )
        /* Build css files here */
        .sass(
            'app.scss', // Source files
            'public/css/app.css' // Destination folder
        )
        .scripts(
            'foundation/vendor/modernizr.js', 'public/js/modernizr.js', 'resources/assets/js'
        )
        .scripts([
                'foundation/vendor/fastclick.js',
                'foundation/vendor/jquery.js',
                'foundation/foundation.js',
                'app.js'
            ], // Source files
            'public/js/app.js' // Destination file
        )
        .version([
            'public/css/app.css',
            'public/js/modernizr.js',
            'public/js/app.js'
        ]);

});

My header file contains these links (which resolve OK with the compiled files in inspect).

<link href="{{ elixir('css/app.css') }}" rel="stylesheet" />
<script src="{{ elixir('js/modernizr.js') }}"></script>
<script src="{{ elixir('js/app.js') }}"></script>

I have copied into a public/temp folder the Foundation files so I can link in <head> to test. If I replace the elixir calls to the hard links to foundation.css the formatting on the page works.

<link href="temp/css/normalize.css" rel="stylesheet" />
<link href="temp/css/foundation.css" rel="stylesheet" />
<script src="temp/js/vendor/jquery.js"></script>
<script src="temp/js/vendor/fastclick.js"></script>
<script src="temp/js/foundation.js"></script>

My footer contains the Foundation initialization:

<script>
    $(document).foundation();
</script>

My app.scss looks like this:

/* Import Normalize.scss */
@import 'normalize';

/* Import the Foundation settings.scss page */
@import 'settings';

/* Import the Entire Foundation framework */
@import 'foundation';

I can confirm the files needed for the sass compilation are present and in the correct folders.

resources/
   /assets
      /css
         /foundation
            /components
            _functions.scss
         _settings.scss
         app.scss
         foudnation.scss
         normalize.scss

The $gulp # command runs OK giving no errors.

$ gulp #
[14:53:11] Using gulpfile f:\Projects\flyer\gulpfile.js
[14:53:11] Starting 'default'...
[14:53:11] Starting 'copy'...

Fetching Copy Source Files...
   - vendor/bower_components/foundation/scss/**/*

Saving To...
   - resources/assets/sass

[14:53:11] Finished 'default' after 58 ms
[14:53:11] Finished 'copy' after 126 ms
[14:53:11] Starting 'copy'...

Fetching Copy Source Files...
   - vendor/bower_components/foundation/js/**/*

Saving To...
   - resources/assets/js/foundation

[14:53:11] Finished 'copy' after 96 ms
[14:53:11] Starting 'sass'...

Fetching Sass Source Files...
   - resources\assets\sass\app.scss

Saving To...
   - public/css/app.css

[14:53:12] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:53:12] Finished 'sass' after 691 ms
[14:53:12] Starting 'scripts'...

Fetching Scripts Source Files...
   - resources\assets\js\foundation\vendor\modernizr.js

Saving To...
   - public/js/modernizr.js

[14:53:13] gulp-notify: [Laravel Elixir] Scripts Merged!
[14:53:13] Finished 'scripts' after 708 ms
[14:53:13] Starting 'scripts'...

Fetching Scripts Source Files...
   - resources\assets\js\foundation\vendor\fastclick.js
   - resources\assets\js\foundation\vendor\jquery.js
   - resources\assets\js\foundation\foundation.js
   - resources\assets\js\app.js

Saving To...
   - public/js/app.js

[14:53:13] gulp-notify: [Laravel Elixir] Scripts Merged!
[14:53:13] Finished 'scripts' after 83 ms
[14:53:13] Starting 'version'...

Fetching Version Source Files...
   - public\css\app.css
   - public\js\modernizr.js
   - public\js\app.js

Saving To...
   - public\build

[14:53:13] Finished 'version' after 94 ms

The output file is in:

public/
   /build
      /css
         app.css.map
         app-122456abc.css

And It appears in inspect OK, and it is not empty

<link href="/build/css/app-122456abc.css" rel="stylesheet" />

What am I missing? Thanks!

Solution

Well, insanity has set in... for some reason my scss files were corrupt. Yes, it took me all this time to figure it out... I downloaded the master branch of Foundation 5, manually copied the files across to the Laravel Project and it all worked. Not sure why the bower download is giving me bad files. All the above works fine if you are using F5 on Laravel, so hope this helps someone else miss out on insanity!