title: Fonts and images source with Laravel Mix inside sub folder
body: <p>im using Larverl 5.5 with Laravel Mix 1.0. All of my images are stored in public/images, fonts are in public/fonts. The problem is if my Laravel project is inside sub folder like htdocs/demo/laravel, all the images and fonts url cannot be found in scss files. For e.g:</p>
  
  <p>app.scss</p>
  
  <pre><code>// Bootstrap
  @import "~bootstrap-sass/assets/stylesheets/bootstrap";
  
  // Font
  @import "components/fonts";
  
  // Font Awesome
  @import "~font-awesome/scss/font-awesome.scss";
  
  wrapper {
    .banner {
      background: url('/images/banner.png') no-repeat;
      background-size: cover;
      }
  }
  </code></pre>
  
  <p>fonts.scss (inside fonts/components folder)</p>
  
  <pre><code>@font-face {
    font-family: MyFont;
    font-weight: normal;
    font-style: normal;
    src: url("/fonts/MyFont.eot");
    src: url("/fonts/MyFont.ttf") format("truetype"),
         url("/fonts/MyFont.woff") format("woff");
  }
  </code></pre>
  
  <p>I also install font awesome and boostrap by npm and suffer the same problem with font. </p>
  
  <p>Here is my webpack.mix.js</p>
  
  <pre><code>let mix = require('laravel-mix');
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p><strong>Update 1:</strong>
  The problem with fonts was solve by add this to webpack.mix.js:</p>
  
  <pre><code>mix.setPublicPath('public/');
  mix.setResourceRoot('../');
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>Now the problem remains is the background image on scss file. It still points to "/images/banner.png" instead of "../images/banner.png" in app.css after run "npm run dev"</p>
  
  <p><strong>Update 2:</strong>
  I was wrong, the problem with fonts still remain, only font awesome got correct path "../fonts", MyFont still points to "/fonts"</p>