Webpack code spiltting + vue + Dynamic css loading

Question

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.

Are you using any project templates, or did you create your own project's webpack config? — Ricardo Nolde
– Ricardo Nolde, Commented Apr 12, 2018 at 0:38
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
– Ricardo Nolde, Commented Apr 13, 2018 at 1:44

胡亚雄 · Accepted Answer · 2018-04-12 09:55:59Z

1

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

<style scoped>

(in your *.vue files)

answered Apr 12, 2018 at 9:55

胡亚雄

2,1891 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1