Laravel 5.4 with Foundation 6.3

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.