Как использовать sass во Vue для верстки под мобильные?

Question

[postya]

Нужно делать верстку Vue JS приложения под мобильные устройства. Экранов будет 6-7.
Я обычно всю верстку для каждого компонента делаю в самом комопненте в разделе style

Но как-то сильно большое полотно получается, если делать вообще всю верстку под все разрешения. Надоело скролить.
Вот я и подумал,можно ли как-то верстку отдельно под мобильные вынести в отдельные файлы, а потом их как-то импортировать в компонент так,чтобы только компонент мог видеть свои классы из импортированных файлов?

Буду использовать синтаксис scss для sass

Можете показать пару примеров с отдельныим файлами?

Пример того,что все стили под мобильные описаны в одном компоненте vue

@media screen and (max-width: 1366px) and (max-height: 768px) {
  .nav-image {
    width: 50%;
  }
}

@media screen and (max-width: 1200px) and (max-height: 720px) {
  .instagram {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .navigation {
    transform: translateX(calc(-1 * var(--nav-width)));
  }
}

Comments

[Михаил]

эээээээээээм, как насчет того, чтоб media засунуть в класс, где оно и используется?
да и в sass import есть если что

[postya]

Михаил, так у меня так и есть на данный момент, все стили описаны в теге style в компоненте, но пробелма в том, что очень большой компонент получается, приходится долго скролить, чтобы найти класс для конкртеного разрешения экрана
Можете показать пример с import?

[Михаил]

postya, ну так разделите на мелкие компоненты

[postya]

Михаил, для меня логичней,чтобы к примеру верстка навигации была в навигации

Answer 1

[Алекс Глебов]

можно вынести в отдельные файлы

img

Comments

[postya]

Спасибо!

[Дмитрий]

А реально вставить в style условие? типа if isMobile()? then import....
или может как-то иначе можно подключить дополнительные стили только для мобильных устройств?