I wanted to share how I got Foundation Site 6.3 to work with Laravel 5.4 and webpack. I tried this on a brand new Laravel project.
First, edit the package.json file and replace the bootstrap-sass entry with
"foundation-sites": "^6.3.1"
Then run npm install. This will download all the dependencies and store them in the node_modules directory. Inside this directory, you will find the foundation-sites directory. You will need to copy the _settings.scss from there to the resources directory.
cp node_modules/foundation-sites/scss/settings/_settings.scss resources/assets/sass/
Edit the _settings.scss file. You will need to modify the path to the util.
@import 'node_modules/foundation-sites/scss/util/util';
Edit the resources/assets/sass/app.scss file by removing the @import bootstrap entry then entering the following code.
@import "settings"; $global-flexbox: true; // optional if you want to enable flexbox globally @import "node_modules/foundation-sites/scss/foundation"; @include foundation-everything(true);
Edit the resources/assets/js/bootstrap.js file.
require('bootstrap-sass'); // comment this out or remove require('foundation-sites'); // add this
Edit webpack.mix.js file.
// remove the following code modify mix.js(...) .sass(...);
// replace it with this mix.sass('resources/assets/sass/app.scss', 'public/css'); mix.combine([ 'node_modules/jquery/dist/jquery.min.js', 'node_modules/foundation-sites/dist/js/foundation.min.js' ], 'public/js/app.js');
Now you can run npm run dev to compile your webpack. Only thing left is to add the following javascript on your page.
$(document).foundation();
This was done on Laravel 5.4.27 and Foundation-Site 6.3.1.