css - Vue cli 构建生产更改 css 中的不透明度

Question

当我构建我的 vue 元素时，它会将不透明度从 50% 更改为 1%。

在开发中没有这个问题，但在生产中它改变了风格。

开发(npm run serve): click to see

.VueCarousel-dot-container button.VueCarousel-dot {
    background-color: #7390a7 !important;
    opacity: 60%;
}

生产(npm 运行构建): 当我构建并上传它时:

.VueCarousel-dot-container button.VueCarousel-dot {
    background-color: #7390a7!important;
    opacity: 1%;
}

Answer 1

尝试将 opacity: 60%; 替换为 opacity: 0.6; 这是等效的，但构建脚本中的 CSS 缩小/转换可能存在问题. 此外，当您以百分比设置不透明度时，只有 Firefox (70+) 和 Chrome (78+) 可以理解，其他浏览器仅支持范围从 0.0 到 1.0.