title: Webpack generating empty CSS files in Laravel app when using Vue-Router
body: <p>I have a <code>Laravel</code> application that uses <code>webpack</code> to compile some SASS assets. </p>
  
  <pre><code>mix.js('resources/js/vue/User/dashboard.js', 'public/js/User')
  
  .js('resources/js/vue/home.js', 'public/js')
  .js('resources/js/vue/admin-dashboard.js', 'public/js/admin')
  
  .sass('resources/sass/app.scss', 'public/css')
  .sass('resources/sass/layouts.scss', 'public/css');
  </code></pre>
  
  <p>Inside one of the JS files it compiles, is a Vue-Router instance that creates webpack chunks:</p>
  
  <pre><code>const router = new VueRouter({
      mode: "history",
      routes: [
          {
              path: "/admin",
              component: () =&gt; import("./admin/Dashboard.vue" /* webpackChunkName: "js/admin/components/dashboard" */ )
          }
      ],
      scrollBehavior (to, from, savedPosition) {
          return savedPosition || { x: 0, y: 0 };
      }
  });
  </code></pre>
  
  <p>The above code breaks the compiling of my CSS assets. When I run <code>npm run dev</code>, the output says that the CSS files are generated properly.</p>
  
  <pre><code> DONE  Compiled successfully in 3177ms                                                                                                                                                                   3:16:42 PM
  
             Asset      Size  Chunks             Chunk Names
      /css/app.css   196 KiB     mix  [emitted]  mix
  /css/layouts.css  9.91 KiB     mix  [emitted]  mix
  </code></pre>
  
  <p>However when I check the .css files, both of them are empty. If I comment out the Vue-Router portion, the CSS files generate correctly. </p>
  
  <p><strong>Why does including the Vue-Router webpack chunks break the compiling of the CSS assets?</strong></p>