Webpack code spiltting + vue + Dynamic css loading

1
votes

Following code-splitting recommendations from Webpack and vue-router, I am lazy loading heavy pages in my routes using dynamic import as such:

const Login = () => import("../views/Login/Login.vue");

However if this login.vue page contains an import statement for a css, the style is not properly loaded.

<script>
import '@/assets/sass/my_login.scss'
...

If I remove the dynamic import of the Login.vue page in my routes such as 

import Login from '../views/Login/Login.vue'

The css is correctly loaded.

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.

How am I loading properly this css? Is there some magic syntax to be used in the Login.vue page or in the routes?

Thank your for your help

S.

1
webpackvue.jsvue-router
Are you using any project templates, or did you create your own project's webpack config? - Ricardo Nolde
I use a template based on the latest vue-cli - Sylvain C.
Then why don't you use the vue single file component script tag, instead of trying to import it separately? vuejs.org/v2/guide/single-file-components.html - Ricardo Nolde

1 Answers

1
votes

If you dont want global styles, you can write scope styles in your components. Have u tried this?

<style scoped>

(in your *.vue files)