当部署到 Netlify 时，Nuxt 将 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%;

哦！