In VueJs, how to attach styles to specific groups of components?

Question

Sass

Hello!
Let's say there is a group of components:
route.js

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/category',
      component: Category,
      children: {
        { path: '', component: CategoryList },
        { path: '/view', component: CategoryView },
        { path: '/edit', component: CategoryEdit },
      }
    },
    {
      path: '/post',
      component: Post,
      children: {
        { path: '', component: PostList },
        { path: '/view', component: PostView },
        { path: '/edit', component: PostEdit },
      }
    }
  ]
})

and there are 2 SCSS files category.scss and post.scss
I need to connect each style separately when loading a certain component,
for example, when loading the Post component and its child components PostList, PostView, PostEdit, I need to load the post.scss style I
tried several options but it doesn’t work I
tried like this with the scoped attribute

<style scoped lang="scss">
  @import '@/assets/scss/post.scss';
</style>

but I see it loads immediately when the page is loaded ...... and not when the component is loaded,
and by the way, in route.js I made it so that the post component was loaded separately by
lazy loading

const Post= resolve => {
  require.ensure(['@/views/post/'], () => {
    resolve(
        require('@/views/post/')
    )
  })
}

but it is the style that is already loaded in the main page .... although there is no Post component there,
in short, I don’t know what I’m doing wrong. but if you have an idea, please tell me. How can I attach a style to certain groups of components?

Answer 1

You can do this:
But it's better to make separate visual (stupid) components with their own styles that are used only once. And these stupid components you will use on your pages (smart components).
I advise you to read - there is about React, but the very concept of components in React and View is very similar.
PS:
and by the way, in route.js I made it so that the post component was loaded separately by lazy loading

const Post= resolve => {
  require.ensure(['@/views/post/'], () => {
    resolve(
        require('@/views/post/')
    )
  })
}

What is this for? It can be much simpler (as it is written in the documentation ):
const Post= () => import('@/views/post/')