0

Using Vuetify.js v-stepper component, I can change the color of v-stepper-step using the color prop:

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

This works fine when I am using Vuetify in Nuxt.js and launch the server locally. But I noticed when I deploy my application on Gitlab, the color prop does not take effect and inspecting the element in question simply shows an empty style:

element.style {
}

That is why I tried to use a class instead:

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

Here is that CSS class:

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

I do this in the hope to action the color prop from within a CSS class and deploy again on Gitlab to see the output, however this does not work even locally.

enter image description here

How to overcome this issue?

Codepen.

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
  • 1
    You must target the proper element: `.v-stepper__step__step { background-color: red !important; border-color: red !important; }`. But wait, I noticed that some styles didn't work for me when I built my large vuetify project for production. So I think this is not specific to the `color` prop. It's been months since I noticed that some of my vuetify css is not working in production build (but works locally), and this is the first post that I've seen that has the similar issue. I asked community, but no response. So I'm not sure what is the real solution for this. (But maybe I'm crazy.) – Traxo Oct 19 '18 at 06:44
  • Good to hear I am not alone :) I actually [reported](https://github.com/vuetifyjs/vuetify/issues/5354) this as a bug @Traxo – Billal Begueradj Oct 19 '18 at 06:48
  • But just to be clear, it doesn't work when you build it with `npm run build` (or yarn, or whatever is the alternative command for building for the production?)? Have you tried different servers maybe? – Traxo Oct 19 '18 at 06:53
  • It does not matter whether I use `yarn` or `npm` ... We deploy only on Gitlab (because it costs) – Billal Begueradj Oct 19 '18 at 06:57

1 Answers1

1

CSS color property is used to style text. It's different than vue property color.

You can use (demo):

.step-number > .v-stepper__step__step{
  background-color: red !important;
  border-color: red !important;
}
barbsan
  • 3,418
  • 11
  • 21
  • 28
  • 1
    @BillalBegueradj It doesn't work if you are using scoped styles, [here is how to solve it](https://stackoverflow.com/a/50985784/1981247). – Traxo Oct 19 '18 at 06:53