@media does not work in .vue file's style area #11054
Description
Version
2.6.10
Reproduction link
https://jsfiddle.net/chrisvfritz/50wL7mdz/
Steps to reproduce
Create a new component in .vue file
<template>
<header class="header"></header>
</template>
<script>
export default {
}
</script>
<style scoped>
.header {
height: 2000px;
background-color: black;
}
@media only screen and (min-width: 576px) {
.header {
height: 2000px;
background-color: white;
}
}
</style>
What is expected?
Media query detects different resolutions and apply styling
What is actually happening?
Media query does not work and the styling with line priority applies.
If I don't use VueJS it works just fine. I tried with raw html css it is fine.