Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

nadhirboukhenifra's avatar

Using Foundation Zurb 6.3.0 with Laravel 5.4

Hello,

i will show you how to add Foundation Zurb 6.3.0 to Laravel 5.4 :) !

in empty or new Laravel project do this:

  • remove the bootstrap entry from package.json and replace it with:
"foundation-sites": "^6.3.0",

or you can install it from NPM with:

npm install foundation-sites --save-dev
  • in resources/assets/sass/app.scss, comment out all the import code. or just remove all the code , and add this:
// Settings
@import "settings";

// Foundation
@import "node_modules/foundation-sites/scss/foundation";

// Include Everything (True) for the Flex Grid :);
@include foundation-everything(true);

  • in resources/assets/js/bootstrap.js, look for require('bootsrap-sass'); and remove it.

  • go to this path (with File Explorer) node_modules\foundation-sites\scss\settings and copy the file _settings.scss to the new path resources\assets\sass , and you can remove the _variables.scss file.

  • Open the file _settings.scss in code editor , and change the line 44:

@import 'util/util';

to:

@import "../../../node_modules/foundation-sites/scss/util/util";
  • open your file webpack.mix.js in the root of your project. and comment or remove the code:
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

then add this code instead:

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');

  • Finally you can run npm command: npm run dev or: npm run watch

  • Notice: in your blade Template you still need using the code below because the The Foundation files combine and mixed to this Two Files:

    <!-- Scripts -->
    <script src="/js/app.js"></script>

and

    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">
  • ADD the Initializing code to run JavaScript 
<script> $(document).foundation();</script>
  • For the .Version() its work only for CSS file. The End :) .
0 likes
18 replies
dmsone97's avatar

Does anybody know how to use Foundation Zurb 6.3.0 with Laravel 5.4 using composer require zurb/foundation?

2 likes
cshelswell's avatar

worked great for me though for the import foundation bit i had to do this:

@import "../../../node_modules/foundation-sites/scss/foundation";

Otherwise it had an error saying it couldn't find foundation

1 like
takl's avatar

Too bad I am reading this only know. I had to switch back to gulp on my foundation projects after 5.4.

balakan's avatar

I've managed to get it working :) It's ready to use with authentication and HTML code rewritten.

Laravel 5.4 and Foundation 6.3 with Foundation-icons and motion-ui included. Everything compiled in single app.js and app.css files.

https://github.com/balakan/laravel-foundation

3 likes
Chizzo's avatar

@nadhirboukhenifra Thank you for sharing, worked like a charm! This helped me get it to work using Composer. @dmsone97 This is how I managed with composer:

  • In command line I ran the following:
composer require zurb/foundation
composer require components/jquery

composer update
  • resources/assets/sass/app.scss looks like this:
// Settings
@import "vendor/zurb/foundation/scss/settings/settings";

// Foundation
@import "vendor/zurb/foundation/scss/foundation";

// Everything
@include foundation-everything(true);

  • Removed require('bootsrap-sass'); and window.$ = window.jQuery = require('jquery'); from resources/assets/js/bootstrap.js

  • Added $(document).foundation(); to resources/assets/js/app.js

  • in vendor/zurb/foundation/scss/settings/, I opened _settings.scss and edited line 44 as follows:

@import '../util/util';
  • Then edited webpack.mix.js as follows:
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .js('resources/assets/js/app.js', 'public/js');
mix.copy('vendor/components/jquery/jquery.min.js', 'public/js');
mix.copy('vendor/zurb/foundation/dist/js/foundation.min.js', 'public/js');

Note: The order of the scripts above matters.

  • And finally, run either of the following commands: npm run dev OR npm run prod OR npm run watch

Update: Changed webpack.mix.js file; Initially tried mix.combine and then mix.scripts but later used mix.js and mix.copy instead, after discovering this error: require('./bootstrap') Uncaught ReferenceError: require is not defined, which resulted from require('') directives not compiling correctly, owing to using mix.combine and mix.scripts, which are intended for Vanilla JS. Documentation here: https://laravel.com/docs/5.4/mix#working-with-scripts

2 likes
bigboss's avatar

Thanks! I've just made a change on the app.js to import the "foundation-site" so it can compile the foundation js with the jquery and vue, this way I didn't have to use mix.combine.

Magneto10's avatar

Wasted a lot time; Foundation not working well. Found that <script> $(document).foundation();</script> is the missing key. Thanks a lot

davekaplan's avatar

This is very cool, thanks for the details. I've got it working but when I run npm ... for watch, prod or dev it seems like it takes a long time to have the compiled result available in the browser. It's also a huge file during dev. This is because of the @include foundation-everything(true); right?

If I make changes to the foundation.scss file that's in the node_modules I run the risk of losing those settings during an update or cloned repo? Wondering if the foundations file can be stored in assets and point back to the node_modules location or something like that.

I wondered if anyone has a workflow or thoughts about a much leaner setup for Foundation. Or am I using mix and or webpack wrong? I was thinking of looking at bringing over a basic site version from a git clone.

joshtipton28's avatar

Thanks for this. Still works like a charm with Foundation 6.4.1

1 like
Laraveldeep's avatar

Exactly, this had been discussed on 5.3 thread. I found this tutorial with explanation.

http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html

Hope Laravel 5.5 will have presets for Foundation as well.

Update: By the way I have created the preset already but will not be included in core package. However there is an unofficial way to use it. Check this out here https://github.com/Laraveldeep/Laravel-Scaffolding-Presets

Preset thread: https://laracasts.com/discuss/channels/laravel/laravel55-zurb-foundation-preset

1 like
Ardalin's avatar

Thank you! On Laravel 5.5 and Foundation 6.4.3 all worked fine : )

Please or to participate in this conversation.