Vue cli build production change opacity in css

Question

When I build my vue project, it changes opacity from 50% to 1%.

In development it doesn't have this problem but in production it changes style.

development (npm run serve): click to see

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

production (npm run build): When I build and upload it:

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

Answer 1

Try replacing the opacity: 60%; with opacity: 0.6; which is the equivalent, but there might be a problem with CSS minification/transpilation in your build script. Also, when you set the opacity in percentage, only Firefox (70+) and Chrome (78+) can understand it, other browser support just values which are in range from 0.0 to 1.0.