Nuxt部署到Netlify时将CSS不透明度编译为1％，而不是100％

Question

我有一个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%;。

这是否发生在其他任何人身上，或者有人有建议吗？谢谢！

Answer 1

感谢@Phil的回答。有趣的是，您的脑子怎么会立即认为这一定是一件复杂的事情（我立即认为这是某种Nuxt编译配置），而实际上最简单的事情是原因（正确使用Opacity属性）。

解决方案>>

更改为opacity: 1;，而不是opacity: 100%;

Doh！