Override the existing Css in Vaadin

Question

I need to override the existing css of ValoTheme, i added the new css rules in mytheme.scss ,i compile the theme , and run the application but still it is not update on UI.

  @mixin mytheme {
      @include valo;
      // Insert your own theme rules here

      .v-widget {
        box-sizing: border-box;
        vertical-align: top;
        text-align: right;
    }

    .v-slot, .v-spacing {
        display: -webkit-inline-box;
        white-space: nowrap;
        vertical-align: top;
    }
}

i tried to clean and refresh the project. how to update the UserInterface by Override of the existing css of valoTheme

Have you checked in a devtools that styles are not overridden? Also, as mentioned in the answer, do yo have a `@import '../valo/valo.scss';`. It's not in your example, at least — anasmi, Jun 24 '19 at 12:08

score 1 · Accepted Answer · answered May 29 '19 at 18:05

1

Did you include the mixin in your scss ?

In your example code, I saw that you declared a mixin by @mixin mytheme. But did you wrote @incude mytheme in your code ?

Sass mixin and include: https://sass-lang.com/documentation/at-rules/mixin

answered May 29 '19 at 18:05

Issac Li

36
2

Override the existing Css in Vaadin

1 Answers1