dilikpulatov
@dilikpulatov
веб-программист

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

Здравствуйте!
Допустим есть группа компонентов:
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
короче не знаю чего я делаю не так. но если у вас есть идея, подскажите пожалуйста. Как я могу подключит стил к определенным группам компонентам?
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
Можно сделать так:
<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/')
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы