When webpack runs the project, the content in the style tag of the vue file has no effect, so it is effective to copy it directly into the html file?

problem description

does the content in the style tag of the vue file have no effect when webpack runs the project?

the environmental background of the problems and what methods you have tried

I copy the style style directly into the html file and it has an effect

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< template >

<div>
    <div :class="isRed?"red":"green"">class</div>
    <div :class="{"red":true,"big":true}">class</div>
</div>

< / template >
< script >

export default {
    data() {
        return{
            isRed:false
        }
    }
}

< / script >
< style >
.red {

    background-color: red;
}

.green {

    background-color: green;
}

.big {

font-size:30px;

}
< / style

what result do you expect? What is the error message actually seen?

Jun.23,2021
Menu