@SM_ST

Пересекаются стили в nuxt js?

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

получается, когда я захожу с телефона, мне выдает и стили с компонента MobileHeader(шаблон mobile-default) и с компонента Header (шаблон default) и когда с компа, тоже стили с двух компонентов

как от этого избавиться?

<script>
export default {
  layout: ({ $device }) => $device.isDesktop ? 'default' : 'mobile-default',
}
</script>



в шаблоне mobile-default я вызываю header для мобильных
<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>


<style lang="scss" module>
header {
  background-color: var(--theme-second-color);
  height: 48px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>


в default для остальных устройств

<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>


<style lang="scss" module>
header{
  background-color:var(--theme-second-color);
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 7.5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  • Вопрос задан
  • 320 просмотров
Пригласить эксперта
Ответы на вопрос 1
для локализации стилей в vue используется scoped
<style scoped>и тогда они применяются только к этому компоненту.

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

<component :is="layout">
      <router-view/>
    </component>


computed: {
    layout() {
      return "admin-layout";
    }
  },

Но я полагаю, что вы так и делаете, просто выдернули из контекста.
Так что scoped
Ответ написан
Ваш ответ на вопрос

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

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