Laravel 5.4 adding zurb foundation 6.3.0

Question

i would like to learn the best way how to add zurb foundation single component to my fresh laravel project.

What i have done so far is:

npm install foundation-sites --save

And second is

<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

to my layout.blade.php

And my questions is what should i write in

1. sass/app.scss
2. webpack.mix.js

And maybe there is something else that needs to be done? I want to use label component only...

<span class="label success">Hello world</span>

thank you very much!

Answer 1

i solve that ,look at :

https://laracasts.com/discuss/channels/tips/using-foundation-630-with-laravel-54

in resources/assets/sass/app.scss

add this after clear all what you find:

// 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";

in webpack.mix.js

open your file webpack.mix.js in the root of your project. and comment or remove the code:

change this:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

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

DO NOT FORGOT TO ADD the Initializing code to run JavaScript

IN YOUR FOOTER:

<script> $(document).foundation();</script>