В VueJs как подключить стили к определенным группам компонентам?

Question

[Дилик Пулатов]

Здравствуйте!
Допустим есть группа компонентов:
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 },
      }
    }
  ]
})

и есть 2 файла SCSS category.scss и post.scss
мне нужно подключить каждый стил отдельно при загрузка определенный компопнент
например при загрузка компонент Post и его дочерний компоненты PostList, PostView, PostEdit нужно загрузит стил post.scss
пробовал не сколько вариантов но не получается
пробовал вот такое с атрибутом scoped

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

но вижу она загружается сразу при загрузке страница......а не при загрузке компопнент
и кстати я в route.js сделал так чтобы компонент пост загрузило отдельно
ленивая загрузка

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

но именно стил уже загружается в главное странице....хотя там нету компонент Post
короче не знаю чего я делаю не так. но если у вас есть идея, подскажите пожалуйста. Как я могу подключит стил к определенным группам компонентам?

Answer 1

[Klein Maximus]

Можно сделать так:

<style scoped lang="scss" src="@/assets/scss/post.scss"></style>

Но лучше сделать отдельные визуальные (глупые) компоненты со своими стилям, использующимися только один раз. И эти глупые компоненты Вы будете использовать на своих страницах (умных компонентах).
Советую почитать - там про Реакст, но само понятие компонентов у Реакта и Вью очень похоже.

P.S.:

и кстати я в route.js сделал так чтобы компонент пост загрузило отдельно ленивая загрузка

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

Это зачем? Можно намного проще (как и написано в документации):
const Post= () => import('@/views/post/')

Comments

[Дилик Пулатов]

Это зачем? Можно намного проще (как и написано в документации):
const Post= () => import('@/views/post/')

в док я не смог найти способ чтобы сделать ленивую загрузку для не сколько компонетов
и сейчас сделал вот так

const Users = r => require.ensure([], () => r(
    require('@/views/users/')
), 'user-pages')

и это работает)

[Дилик Пулатов]

а про подключения стил попробую то что вы сказали

[Дилик Пулатов]

и кстати если вы знакомы с ленивые загрузкой то помогите решат этот проблему в стековерфлов

[Klein Maximus]

в док я не смог найти способ чтобы сделать ленивую загрузку для не сколько компонетов

Не понял. Для "нескольких компонентов" или "не только для компонентов"?
Не могли бы Вы более четко сформулировать данную проблему?

[Дилик Пулатов]

Klein Maximus, итак есть группа компонентов

export default {
  path: '/users',
  component: Users,
  children: [
    { path: 'list', component: List},
    { path: 'view', component: View}
  ]
}

и такие много...мне нужно чтобы компонент и его дочерний компоненты загрузилось вместе
и поэтому я решил сделать ленивые загрузку сделать так чтобы она работало с группа компонентов
и сделал так
пример код и здесь

const Post = r => require.ensure([], () => r(
    require('@/views/post/')
), 'post-pages')
const PostView = r => require.ensure([], () => r(
    require('@/views/post/view')
), 'post-pages')
const PostEdit = r => require.ensure([], () => r(
    require('@/views/post/edit')
), 'post-pages')

это работает как я хочу

[Klein Maximus]

Дилик Пулатов, так явно короче:

const Post = () => import(/* webpackChunkName: "post-pages" */ '@/views/post/')
const PostView = () => import(/* webpackChunkName: "post-pages" */ '@/views/post/view')
const PostEdit = () => import(/* webpackChunkName: "post-pages" */ '@/views/post/edit')

P.S.: Конечно, тут есть некоторая зависимость от версии webpack, но статье, ссылку на которую Вы дали. уже почти 2 года - моральное устаревание налицо.

[Дилик Пулатов]

Klein Maximus, я это смотрел....где здесь указать группу? я этого не понял и решил по другому

[Klein Maximus]

Дилик Пулатов, какую группу? Если Вы про файл, в который будут включены модули, это указывается в директиве /* webpackChunkName: "post-pages" */.

[Дилик Пулатов]

Klein Maximus, вот этого я не понял.....то есть где указать и что делать чтобы группа компонентов загрузилось вместе

[Klein Maximus]

Документация по webpack - https://webpack.js.org/api/module-methods/#magic-c... - там все есть :)

[Дилик Пулатов]

Klein Maximus, а нет...похоже я не то понял)) все получилось...спасибо большое)) (вроде сегодня очень устал...чет башка не работает :))