Несоответствие режима производства и разработки CSS - PullRequest
Новая
       7

Несоответствие режима производства и разработки CSS

0 голосов
/ 08 января 2019

Я использую Vuetify фреймворк с добавленным в него пользовательским CSS. Мой проект - это шаблон веб-пакета. В режиме разработки мои пользовательские изменения CSS применяются к элементам HTML, но в производственном режиме эти изменения не отображаются. Что мне нужно сделать, чтобы мой пользовательский CSS применялся в производственном режиме?

Я уже пытался пересоздать проект. Проект Maven, работающий с SpringBoot. 

<template>
<div>
    <div>
        <v-expansion-panel>
            <v-expansion-panel-content v-for="(item,i) in dashboardTitles" :key="i">
                <div slot="header">
                    <div class="title-header">
                        {{item.title}}
                    </div>
                </div>
            </v-expansion-panel-content>
        </v-expansion-panel>
    </div>
</div>
</template>
<style>
.v-expansion-panel__header {
    background-color: #005f81;
    margin: 5px;
    padding: 10px;
    color: white;
    min-height: 20px;
    max-height: 30px;
    font-size: 18px;
}

.title-header {
    margin-left: 30px;
}

.theme--light.v-expansion-panel .v-expansion-panel__container .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon,
.v-expansion-panel__container--active > .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon {
    color: white;
}

.v-expansion-panel__header__icon {
    position: absolute;
    float: left;
    outline: none;
}
</style>
Класс

.v-expansion-panel__header должен сделать панели тоньше, а текст - меньше, тогда как .theme--light.v-expansion-panel .v-expansion-panel__container .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon и .v-expansion-panel__container--active > .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon должны сделать стрелку, которая идет с компонентом каркаса белым. Как ни странно, .v-expansion-panel__header__icon работает как задумано, перемещая стрелку вправо, а не влево

1 Ответ

0 голосов
/ 08 января 2019

Мне удалось решить эту проблему, добавив стили CSS, которые я добавил к классам CSS Vuetify, а также добавив !important, чтобы убедиться, что они применяются.

...