in vue components, in order to privatize (modularize) the style and not pollute the whole world, you can add the scoped attribute to the style tag to indicate that it only belongs to the current module, which is a very good move, but it can cause problems in some cases.
for example, when a piece of html is dynamically inserted into a component, the inserted html structure will not be marked with the scope attribute, so the styles defined in the component cannot manipulate this part of the html structure.
so after Baidu found that adding > can solve this problem, but after adding found that the project compilation phase error, I would like to ask how to solve this problem?
/ / template:
<template>
<div class="frameNoPay type1">
<div class="guide" v-html="qrContent"> <!--html -->
</div>
</div>
</template>
<style lang="less" scoped>
.frameNoPay.type1{
margin-bottom: 0.6rem;
.guide >>> .desc1{
width: 100%;
text-align: center;
margin-top: 0.95rem;
font-size: 0.28rem;
line-height: 1.21;
color: -sharp333333;
font-family: PingFangSC-Regular;
}
.guide >>> .desc2{
margin-top: 0.1rem;
width: 100%;
font-size: 0.28rem;
line-height: 1.21;
text-align: center;
color: -sharp333333;
font-family: PingFangSC-Regular;
}
}
</style>
the error message is as follows:
