title: Webpack code spiltting + vue + Dynamic css loading
body: <p>Following code-splitting recommendations from <a href="https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/" rel="nofollow noreferrer">Webpack</a> and <a href="https://router.vuejs.org/en/advanced/lazy-loading.html" rel="nofollow noreferrer">vue-router</a>, I am lazy loading heavy pages in my routes using dynamic import as such:</p>
  
  <pre><code>const Login = () =&gt; import("../views/Login/Login.vue");
  </code></pre>
  
  <p>However if this login.vue page contains an import statement for a css, the style is not properly loaded.</p>
  
  <pre><code>&lt;script&gt;
  import '@/assets/sass/my_login.scss'
  ...
  </code></pre>
  
  <p>If I remove the dynamic import of the Login.vue page in my routes such as </p>
  
  <pre><code>import Login from '../views/Login/Login.vue'
  </code></pre>
  
  <p>The css is correctly loaded.</p>
  
  <p>I want to load this Vue page asyncly by using dynamic import and I don't want to make this css global as it is only needed by this specific page.</p>
  
  <p>How am I loading properly this css? Is there some magic syntax to be used in the Login.vue page or in the routes?</p>
  
  <p>Thank your for your help</p>
  
  <p>S.</p>