title: Setup Laravel 8 with Foundation 6
body: <p>I'm currently trying to introduce myself with Laravel but got stuck on a strange error regarding Foundation Sites for the front-end part of the page.</p>
  <p>By default, Laravel set up the code with bootstrap, so I thought all I need to do is switch the bootstrap stuff by the foundation-sites stuff.</p>
  <p>I am doing everything like mentioned in here <a href="http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html" rel="nofollow noreferrer">http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html</a> but somehow, when I compile my <code>app.scss</code> file to css, all I get is the copyright, but no CSS at all.</p>
  <p>Here is my <code>app.scss</code>:</p>
  <pre><code>// Fonts
  @import url('https://fonts.googleapis.com/css?family=Nunito');
  
  // Variables
  @import 'settings';
  
  // Foundation
  @import '~foundation-sites/scss/foundation';
  </code></pre>
  <p>And this is the output from <code>npm run dev</code></p>
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Nunito);/**
   * Foundation for Sites
   * Version 6.6.3
   * https://get.foundation
   * Licensed under MIT Open Source
   */
  </code></pre>
  <p>That's it. As you can see, the copyright is included, so the file was found. If I type in some simple CSS rules beneath that, they are included as well, but not the mixins (though bootstrap uses them as well and worked!) However, if I change it back to bootstrap like this:</p>
  <pre><code>// Fonts
  @import url('https://fonts.googleapis.com/css?family=Nunito');
  
  // Variables
  @import 'settings';
  
  @import '~bootstrap/scss/bootstrap';
  </code></pre>
  <p>My <code>app.css</code> looks just fine like</p>
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Nunito);@charset &quot;UTF-8&quot;;
  
  /*!
   * Bootstrap v4.5.2 (https://getbootstrap.com/)
   * Copyright 2011-2020 The Bootstrap Authors
   * Copyright 2011-2020 Twitter, Inc.
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
  
  :root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fefefe;
    --gray: #6c757d;
    --gray-dark: #343a40;
    ...
  </code></pre>
  <p>My console does not report any errors either</p>
  <pre><code>&gt; @ development C:\inetpub\wwwroot\laravel\blog
  &gt; cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
  
  98% after emitting SizeLimitsPlugin
  
   DONE  Compiled successfully in 3594ms                                                                                                                                                                                19:01:11
  
         Asset       Size   Chunks             Chunk Names
  /css/app.css  170 bytes  /js/app  [emitted]  /js/app
    /js/app.js   1.56 MiB  /js/app  [emitted]  /js/app
  </code></pre>
  <p>So, I am pretty sure I missed something about it, but I have no clue what it is.</p>