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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.