javascript – why my scss in vue js 2 does not load correctly when the router pushes to another page

i have scss file where i put on assets/css/flexbox.scss where the css is like this:

.do-flex {
  display: flex;
}

.do-flex-col {
  display: flex;
  flex-direction: column;
}

then I use them on page About.vue with route ‘/ about’ like this:

<template> 
    <div> 
       <div class="do-flex">
           something here .....
       </div>
    </div>
</template>

<script>
 some codes here......
</script>

<style lang="scss" scoped> 
@import "../../assets/css/flexbox.scss";
</style>

when I am on the website I have a trigger where I have to press the button to approx this.$router.push("/about")

the class do-flex is not rendered correctly and I have similar class on another component which has the same name do-flex but different style and do not use assets/css/flexbox.scss, unlike above, so it do-flex does not use the style of assets/css/flexbox.scss for component About.vue ,

there is something wrong with superfluous naming class? because I do scoped thought of the style About.vue

Leave a Comment