Laravel8 webpack vue extractstyle output selector is something strange - laravel

Question

i'm before using vue(v2, cli) and laravel(for api server).
in this case, i want to use laravel8 with vue2.
so i'm setting laravel with vue. and i want to use vue component style tag.
my vue component like this
<template>
<header class="nav__header">
<div class="nav__header-wrapper">
<div class="nav__top">
<div class="nav__top-content">
</div>
</div>
<div class="nav__menu-wrapper">
<div class="nav__menu-logo">
caravan
</div>
<div class="nav__menu-area-wrapper">
<nav class="nav__menu-area">
<ul class="nav__menu">
<li>caravan</li>
<li>
sub menu
<ul class="nav__menu-sub">
<li>
sub
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</template>
<script>
export default {
name: 'Nav',
}
</script>
<style lang="scss">
.nav__header {
content: '';
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
.nav__header-wrapper{
max-width: 1140px;
margin: auto;
box-sizing: border-box;
outline: 0;
padding: 0;
.nav__top{
background-color: #232323;
position: relative;
z-index: 2;
font-size: .8em;
line-height: 42px;
&:before{
display: block;
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: -2000em;
right: -2000em;
background-color: #232323;
border-top: 1px solid rgba(0,0,0,.1);
}
&:after{
content: ' ';
display: table;
width: 100%;
clear: both;
}
}
}
#media (max-width: 1199px) {
.nav__header-wrapper{
width: 100%;
max-width: none;
padding: 0 30px;
}
}
}
</style>
my laravel-mix set like this.
mix.js('resources/js/app.js', 'public/js')
.vue({
version: 2,
extractStyles: true,
globalStyles: false
})
.sass('resources/sass/app.scss', 'public/css')
i try to change version and extractStyles to file path. but output css always like this
enter image description here
css selectors always strange(is that hashed?)
anybody know this issue?