gulp 的生产文件夹构建问题

Question

我试图弄清楚为什么我在我的 css 中添加的动画名称样式没有从我的开发环境复制到我的生产环境。

这是我生产环境中的代码。

@keyframes a {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.site-main__home-links {
    animation: a 2s
}

这是我开发环境中的代码。

@-webkit-keyframes fadeButtons {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeButtons {
	from { opacity: 0; }
	to { opacity: 1; }
}

.site-main__home-links {
	-webkit-animation: fadeButtons 2s;
	        animation: fadeButtons 2s;
}

这是我的 package.json 的列表

Answer 1

因为 gulp-cssnano 所做的一些事情是尽可能减少长名称以留出空间，所以“fadeButtons”被改为“a”。这是正常的，并且是缩小过程的一部分 - 它被称为“修改”名称。在此缩小后，您的代码应该可以正常工作。

您必须查看 cssnano 文档以了解是否可以关闭修改名称（或某些指定名称）。