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

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

有没有其他人遇到过这种情况，或者有人有建议吗？谢谢！

感谢@Phil 的回答。有趣的是，你的大脑会立即认为这一定是一些复杂的事情（我立即认为这是某种 Nuxt 编译配置），而实际上最简单的事情就是原因（正确使用不透明度属性）。

Solution

改成opacity: 1;代替opacity: 100%;

Doh!