Vuetify.js: цветовая поддержка в v-степпере не вступает в силу при развертывании на Gitlab.Как переместить цветную опору в класс CSS?

Question

Используя компонент Vuetify.js v-stepper, я могу изменить цвет v-stepper-step, используя color prop:

<v-stepper-step :complete="e1 > 2" color="red" step="2">Name of step 2</v-stepper-step>

Это прекрасно работает, когда я используюVuetify в Nuxt.js и запустить сервер локально.Но я заметил, что когда я развертываю свое приложение на Gitlab, цветовая опора не вступает в силу, и проверка рассматриваемого элемента просто показывает пустой стиль:

element.style {
}

Вот почему я вместо этого попытался использовать класс:

<v-stepper-step :complete="e1 > 1" step="1" class="step-number">Name of step 1</v-stepper-step>

Вот этот класс CSS:

.step-number {
  background-color: yellow;
  color: red;
}

Я делаю это в надежде на действие цветовой подпорки из класса CSS и снова развертываюсь на Gitlab, чтобы увидеть результат,однако это не работает даже локально.

Как решить эту проблему?

Codepen .

Answer 1

CSS color свойство используется для стиля текста.Это отличается от свойства vue color.

Вы можете использовать ( demo ):

.step-number > .v-stepper__step__step{
  background-color: red !important;
  border-color: red !important;
}