Не применяются изменения во vue, что делать?

Question

[Максим]

Добрый день. Я может сильно туплю и что-то делаю не так, но. У меня есть в App.vue - навбар и сайдбар, а так же диалоговое окно. Но из этого всего присутствует только сам сайдбар, к нему не применены стили никакие, при попытке что-то менять в файле - никакой реакции. Собираю через npm run serve, подскажите, в чем может быть дело?

Comments

[Эмиль Рахматуллин]

Может, ты покажешь код и структуру проекта? Мы не медиумы)))

[Максим]

Эмиль Рахматуллин, что конкретно вам нужно?
Код App.vue?
package.json?

[Эмиль Рахматуллин]

Максим, App.vue, где ты подключаешь другие компоненты, и желательно структуру проекта

[WapSter]

Все так понятно, скинул бы хотя бы ссылку на github

[Максим]

<template>
    <div id="app">
        <div class="hidden">
            <vs-navbar color="dark" shadow square center-collapsed v-model="active">
                <template #left>
                    <vs-button @click="activeSidebar = !activeSidebar" flat icon>
                        <img src="/img/menu.png" height="30">
                    </vs-button>
                </template>
                <template #right>
                    <vs-button flat >Войти</vs-button>
                    <vs-button>Зарегистрироваться</vs-button>
                </template>
            </vs-navbar>
            <vs-sidebar
                    reduce
                    square
                    background="dark"
                    textWhite
                    absolute
                    v-model="active"
                    :open.sync="activeSidebar"
            >
                <vs-sidebar-item id="home">
                    <template #icon>
                        <img src="/img/logo_svnc_notext.png" height="30">
                    </template>
                    SVNC
                </vs-sidebar-item>
                <vs-sidebar-item id="chat">
                    <template #icon>
                        <img src="/img/chat_logo.png" height="30">
                    </template>
                    Чат
                </vs-sidebar-item>
                <vs-sidebar-item id="Music">
                    <template #icon>
                        <img src="/img/music_logo.png" height="30">
                    </template>
                    Музыка
                </vs-sidebar-item>
                <vs-sidebar-group>
                    <template #header>
                        <vs-sidebar-item arrow>
                            <template #icon>
                                <img src="/img/sm_logo.png" height="30">
                            </template>
                            Соц. сети
                        </vs-sidebar-item>
                    </template>

                    <vs-sidebar-item id="Instagram">
                        <template #icon>
                            <img src="/img/insta_logo.png" height="30">
                        </template>
                        Instagram
                    </vs-sidebar-item>
                    <vs-sidebar-item id="twitter">
                        <template #icon>
                            <img src="/img/vk_logo.png" height="30">
                        </template>
                        VK
                    </vs-sidebar-item>
                    <vs-sidebar-item id="discord">
                        <template #icon>
                            <img src="/img/discord_logo.png" height="30">
                        </template>
                        Discord
                    </vs-sidebar-item>
                </vs-sidebar-group>
            </vs-sidebar>
        </div>
        <div class="center" v-if="loginDialog">
            <button @click="activeLoginDialog=!activeLoginDialog">
                active
            </button>
            <vs-dialog blur v-model="active">
                <template #header>
                    <h4 class="not-margin">
                        Добро пожаловать в <b>SVNC</b>
                    </h4>
                </template>


                <div class="con-form">
                    <vs-input v-model="input1" placeholder="Email">
                        <template #icon>
                            @
                        </template>
                    </vs-input>
                    <vs-input type="password" v-model="input2" placeholder="Password">
                        <template #icon>
                            <i class='bx bxs-lock'></i>
                        </template>
                    </vs-input>
                    <div class="flex">
                        <vs-checkbox v-model="checkbox1">Запомнить</vs-checkbox>
                        <a href="#">Забыли пароль?</a>
                    </div>
                </div>

                <template #footer>
                    <div class="footer-dialog">
                        <vs-button block>
                            Войти
                        </vs-button>

                        <div class="new">
                            Впервые здесь? <a href="#">Зарегистрироваться</a>
                        </div>
                    </div>
                </template>
            </vs-dialog>
        </div>

        <div class="container">
            <router-view/>
        </div>
    </div>
</template>

<script>
    export default {
        components: {
        },
        data: () => ({
            active: 'home',
            activeSidebar: false,
            activeLoginDialog: false,
            input1: '',
            input2: '',
            checkbox1: false,
            loginDialog: false,            
        }),
        methods: {

        }
    }
</script>

<style lang="stylus">
    getColor(vsColor, alpha = 1)
        unquote("rgba(var(--vs-"+vsColor+"), "+alpha+")")
    getVar(var)
    unquote("var(--vs-"+var+")")
    .not-margin
        margin 0px
        font-weight normal
        padding 10px
    .con-form
        width 100%
        .flex
            display flex
            align-items center
            justify-content space-between
            a
                font-size .8rem
                opacity .7
                &:hover
                    opacity 1
        .vs-checkbox-label
            font-size .8rem
        .vs-input-content
            margin 10px 0px
            width calc(100%)
            .vs-input
                width 100%
    .footer-dialog
        display flex
        align-items center
        justify-content center
        flex-direction column
        width calc(100%)
        .new
            margin 0px
            margin-top 20px
            padding: 0px
            font-size .7rem
            a
                color getColor('primary') !important
                margin-left 6px
                &:hover
                    text-decoration underline
        .vs-button
            margin 0px
</style>

Answer 1

[Максим]

Переустановка vuesax