Setup Zurb Foundation 6 (sass) in Laravel 5 using composer - laravel-5

Question

I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.
I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea.
I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.
It has also been added to the composer.json:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"zurb/foundation": "^6.1"
},
But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?
Thanks a lot for your help.

Answer 1

I think Laravel Elixir is more suitable for this purpose.
From the guide:
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
node -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!
Gulp
Next, you'll want to pull in Gulp as a global NPM package like so:
npm install --global gulp
Laravel Elixir
The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
npm install
Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.
You can have a look at Zurb's example template for better understanding.
npm install --global bower
Create a file named bower.json:
{
"name": "my-site",
"dependencies": {
"foundation-sites": "~6.1.2",
"motion-ui": "~1.1.0",
"foundation-sites": "~6.2.0",
"motion-ui": "~1.2.2"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true
}
Then run bower install.
In app.scss, import Foundation:
#import 'foundation';
#include foundation-everything;
Then in gulpfile.js, compile it to CSS:
mix.sass('app.scss', 'public/css/app.css', {
includePaths: [
'bower_components/foundation-sites/scss/'
]
});
Finally to compile, run:
gulp

Answer 2

I think npm way is better suited for front-end stuffs. Take a look at this:
http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html
If you are using earlier version, its just using gulp instead of laravel-mix.