vue file code is as follows:
<template>
<header class="header_bar">
<h1 class="app_title"></h1>
</header>
</template>
<script>
export default {};
</script>
<style scoped lang="stylus">
@import "~assets/stylus/variable.styl"
@import "~assets/stylus/mixin.styl"
.header_bar
position: relative
display flex
height 90px
justify-content center
align-items center
color $brand-color
.app_title
margin-left 10px
</style>the mixin.styl code is as follows:
extend-click()
position: relative
&:before
content: ""
position: absolute
top: -10px
left: -10px
right: -10px
bottom: -10pxrun result:
the function in mixin.styl is not used in the vue file, but because of the introduction of mixin.styl, all the elements in the top column are added pseudo-classes that extend the click area. I would like to ask what is going on