Почемупереписывает мой CSS в Nuxt.js? - PullRequest
Новая
       70

Почемупереписывает мой CSS в Nuxt.js?

0 голосов
/ 22 декабря 2019

Я получаю эту проблему с Nuxt.

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

Видео проблемы

Если я заменю <nuxt-link> на <a>, все начнет работать правильно.

Пример кода Navbar: 

  <nav class="navbar navbar-expand-lg navbar-dark mb-5 text-white" style="z-index: 10; background-color: rgba(0,0,0,0.3)">

<nuxt-link to="/" class="navbar-brand" active-class="active">
  Frontend
</nuxt-link>
<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarNav"
  aria-controls="navbarNav"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon" />
</button>
<div id="navbarNav" class="collapse navbar-collapse">

  <ul class="navbar-nav">
    <li class="nav-item active">
      <nuxt-link to="/" class="nav-link" active-class="active">
        Home
      </nuxt-link>
    </li>
    <li class="nav-item">
      <nuxt-link to="/games" class="nav-link" active-class="active">
        Games
      </nuxt-link>
    </li>
  </ul>

Правильный css (в начале загрузки страницы) Correct CSS

Неверный css (посленесколько секунд) Incorrect CSS

1 Ответ

1 голос
/ 23 декабря 2019

Ошибка была с <style> в index.vue (главная страница).

Изменено значение <style scoped>, и проблема устранена.

...