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(...)

// replace it with this
mix.sass('resources/assets/sass/app.scss', 'public/css');
], '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.


This was done on Laravel 5.4.27 and Foundation-Site 6.3.1.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s