Nuxt在部署到Netlify时将CSS不透明度编译为1%，而不是100%
Nuxt在部署到Netlify时将CSS不透明度编译为1%，而不是100%
提问于 2020-05-28 06:50:24
我有一个Nuxt应用程序，在本地运行得很好。当我将它部署到Netlify (在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%;。
这种情况发生在其他人身上了吗，或者有人有什么建议吗？谢谢!
回答 2
Stack Overflow用户
发布于 2020-05-28 07:56:46
感谢@Phil的回答。有趣的是，你的大脑会立即认为这是某种复杂的东西(我立即认为它是某种Nuxt编译配置)，而实际上最简单的事情就是原因(正确使用不透明属性)。
解决方案
更改为opacity: 1;而不是opacity: 100%;
多！
Stack Overflow用户
发布于 2021-12-31 01:17:06
这不仅仅是Nuxt的问题，create-react-app也会发生这种情况。从不透明度:100%更改为不透明度1；修复了我的构建问题。
这篇文章让我免于患上动脉瘤。因此，这很可能是SCSS问题或Netlify问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62054132
复制相关文章
相似问题
腾讯云开发者
