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

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

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

Войти через центр авторизации
Похожие вопросы
от 70 000 до 90 000 руб.
Datcroft Games Воронеж
от 120 000 до 150 000 руб.
Black Wall Group Москва
от 90 000 до 180 000 руб.
23 апр. 2019, в 12:58
5000 руб./за проект
23 апр. 2019, в 12:22
150 руб./за проект
23 апр. 2019, в 12:04
1000 руб./в час