Nuxt компилирует CSS непрозрачность 1% вместо 100% при развертывании в Netlify - PullRequest
Новая
       40

Nuxt компилирует CSS непрозрачность 1% вместо 100% при развертывании в Netlify

2 голосов
/ 28 мая 2020

У меня есть приложение Nuxt, которое отлично работает локально. Когда я развернул его в Netlify (где yarn generate запускался автоматически), я заметил, что происходят некоторые странные CSS вещи.

У меня есть карта с эффектом наведения: 

<style lang="scss" scoped>
  .gallery-card {
    align-items: center;
    background: url('/backgrounds/image-1.jpg') no-repeat center center;
    background-size: cover;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 400px;
    justify-content: center;
    position: relative;
    max-width: 100%;

    .overlay {
      background-color: rgba(255, 255, 255, 0.3);
      bottom: 0;
      left: 0;
      opacity: 0%;
      position: absolute;
      right: 0;
      top: 0;
      transition: 0.2s all ease-in-out;
      visibility: hidden;
    }

    .gallery-title {
      color: white;
      text-shadow: 3px 3px rgba(0, 0, 0, 0.25);
      transition: 0.2s all ease-in-out;
    }

    .visit-btn {
      opacity: 0;
      transition: 0.2s all ease-in-out;
      visibility: hidden;
    }

    &:hover {
      .overlay, .visit-btn {
        opacity: 100%;
        visibility: visible;
      }
    }
  }
</style>

Эффект зависания работает локально, но не в продакшене. При осмотре в процессе производства элементам под :hover присваивается opacity: 1%; вместо opacity: 100%;.

Это случилось с кем-нибудь еще или у кого-то есть предложения? Спасибо!

1 Ответ

2 голосов
/ 28 мая 2020

Спасибо @Phil за ответ. Забавно, как ваш разум может сразу подумать, что это какая-то сложная вещь (я сразу подумал, что это какая-то конфигурация компиляции Nuxt), когда на самом деле причиной была самая простая вещь (правильное использование свойства Opacity).

Решение

Заменить на opacity: 1; вместо opacity: 100%;

Doh!

...