laravel - Laravel8 webpack vue extractstyle 输出选择器有点奇怪

Question

我在使用 vue(v2, cli) 和 laravel(for api server) 之前。在这种情况下，我想将 laravel8 与 vue2 一起使用。所以我用 vue 设置 laravel。我想使用 vue 组件样式标签。

我的 vue 组件是这样的

<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">
                    <a href="/">caravan</a>
                </div>
                <div class="nav__menu-area-wrapper">
                    <nav class="nav__menu-area">
                        <ul class="nav__menu">
                            <li><a href="">caravan</a></li>
                            <li>
                                <a href="">sub menu</a>
                                <ul class="nav__menu-sub">
                                    <li>
                                        <a href="">sub</a>
                                    </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>

我的 laravel-mix 设置是这样的。

mix.js('resources/js/app.js', 'public/js')
.vue({
    version: 2,
    extractStyles: true,
    globalStyles: false
})
.sass('resources/sass/app.scss', 'public/css')

我尝试将版本和 extractStyles 更改为文件路径。但输出 css 总是像这样 在此处输入图像描述

css 选择器总是很奇怪（那是散列吗？）有人知道这个问题吗？

标签： laravelvue.jsvuejs2laravel-8laravel-mix